new Vueの中身のdataの値が反映されません。

Vue.jsを使って、カラーピッカーを作っています。
new Vueの中身のdataの値が反映されません。
panelクラスのbackgroundColorを
dataのred blue greenのところで変更したかったのですが上手くいきません。

そこが解決されず、先に進めずに困っています。
今こんな感じです。

html
1<!doctype html>
2<html lang="ja">
3    <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- Bootstrap CSS -->
9    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
10
11    <title>Color Picker</title>
12    <style>
13        body{
14            padding: 20px 0;
15        }
16        .panel{
17            height: 200px;
18            border: 1px solid #ccc;
19        }
20    </style>
21    </head>
22    <body>
23        <div id="app" class="container">
24            <div class="panel" :style = "{backgroundColor: panelColor}"></div>
25            <div class="row mt-5">
26                <!-- 画面4/12を３つ -->
27                <div class="col-4">
28                    <label for="red" class="form-label">Red</label>
29                    <input type="range" class="form-range" min="0" max="255" id="red">
30                </div>
31                <div class="col-4">
32                    <label for="green" class="form-label">Green</label>
33                    <input type="range" class="form-range" min="0" max="255" id="green">
34                </div>
35                <div class="col-4">
36                    <label for="blue" class="form-label">Blue</label>
37                    <input type="range" class="form-range" min="0" max="255" id="blue">
38                </div>
39            </div>
40        </div>
41
42    <!-- Optional JavaScript; choose one of the two! -->
43
44    <!-- Option 1: Bootstrap Bundle with Popper -->
45    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
46
47    <!-- Option 2: Separate Popper and Bootstrap JS -->
48    <!--
49    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
50    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
51    -->
52    <!-- vue.js -->
53    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
54    <script>
55        let app = new Vue({
56            el = "#app",
57            data:{
58                red : 255,
59                green : 0,
60                blue : 0,
61            },
62        });
63    </script>
64    </body>
65</html>

ku__ra__ge

2021/11/21 16:18

どこにdataの値が反映されることを期待して、実際はどのような表示がされるかを具体的に書いてください。

行動規範の内容に同意します

回答1件

ベストアンサー

これでpanelクラスのbackgroundColorが反映されます。
問題があった点はソースにコメントで追記してあるので「●問題」で検索してください。

html
1<!doctype html>
2<html lang="ja">
3    <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- Bootstrap CSS -->
9    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
10
11    <title>Color Picker</title>
12    <style>
13        body{
14            padding: 20px 0;
15        }
16        .panel{
17            height: 200px;
18            border: 1px solid #ccc;
19        }
20    </style>
21    </head>
22    <body>
23        <div id="app" class="container">
24            <div class="panel" :style = "{backgroundColor: 'rgb('+red+', '+green+', '+blue+')'}"></div> <!-- ●問題１：vueはred,green,blueという名前を色として解釈しないのでスタイルを自分で組み立てる必要がある -->
25            <div class="row mt-5">
26                <!-- 画面4/12を３つ -->
27                <div class="col-4">
28                    <label for="red" class="form-label">Red</label>
29                    <input type="range" class="form-range" min="0" max="255" id="red">
30                </div>
31                <div class="col-4">
32                    <label for="green" class="form-label">Green</label>
33                    <input type="range" class="form-range" min="0" max="255" id="green">
34                </div>
35                <div class="col-4">
36                    <label for="blue" class="form-label">Blue</label>
37                    <input type="range" class="form-range" min="0" max="255" id="blue">
38                </div>
39            </div>
40        </div>
41
42    <!-- Optional JavaScript; choose one of the two! -->
43
44    <!-- Option 1: Bootstrap Bundle with Popper -->
45    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
46
47    <!-- Option 2: Separate Popper and Bootstrap JS -->
48    <!--
49    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
50    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
51    -->
52    <!-- vue.js -->
53    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
54    <script>
55        let app = new Vue({
56            el : "#app", // ●問題２：ここがイコールになっていた
57            data:{
58                red : 255,
59                green : 0,
60                blue : 0,
61            },
62        });
63    </script>
64    </body>
65</html>