Vue プロパティ変更検知サンプル

by Nobuhiko Futagami

HTML

<div id="app">
  <div :style="{color: user.color}">
    <h1>
      <img :src="user.icon" alt=""><br>
      {{user.name}}
    </h1>
    <p>{{user.description}}</p>
    
    <p class="colors">
      <a v-for="color in colorSchemes" 
       @click="addColor(color)"
       :style="{ backgroundColor: color}"></a>
    </p>
  </div>
 
  <hr>
  
  <h1>配列の更新</h1>
  <ul>
    <li v-for="(fruit,index) in fruits">
      <a @click="changeArrayItem(index)">{{fruit}}</a>
    </li>
  </ul>
  
</div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

ul {
  display: flex;
  width: 100%;
  li {
    margin-right: 10px;
  }
}

.colors a {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
}

Vue

new Vue({
  el: "#app",
  data: {
  	user: {
    	name: "Nobu",
      icon: "https://benri2018.rnd.cloudpack.jp/images/2p.png",
      description: "Vue大好き"
    },
    fruits: [
    	'apple', 'banana', 'lemon', 'orange'
    ],
    colorSchemes: [
    	'red', 'blue', 'green', 'black'
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    addColor(color) {
    	// userにcolorを追加してもビューがかわらない
    	this.user.color = color;
      
      // $setを利用する、もしくはオブジェクトを入れ直すことで反映される
      // this.$set(this.user, "color", color);
      // this.user = Object.assign({}, this.user, { color });
    },
    changeArrayItem(index) {
    	// インデックスでアイテムを直接指定してもビューが変わらない
      this.fruits[index] = "変更済み";
      
      // $setを利用する、Vueが監視出来る配列のメソッドを使う
      // this.$set(this.fruits, index, "$setで変更済み");
      // this.fruits.splice(index, 1, "spliceで変更済み");
    }
  }
})