hello foo bar Saba note | vue.jsの配列のスタックと変更

vue.jsの配列のスタックと変更

2019.5.13 (月)

Vue.jsの醍醐味は双方向バインドを簡単にできるところ。vueで設定したモデル(変数や配列)に変更を加えるというところで、なかなかまとめているサイトがなかったのでまとめてみました。

create

html

<!--html-->
<div id="todoList">
  <form>
    <input type="text" v-model="newItem">
    <button v-on:click="createItem">Create</button>
  </form>
  ...

js

new Vue({
  el: '#todoList',
  data: {
    newItem: "",
    todos: []
  },
  methods: {
    createItem: function(event) {
      event.preventDefault();
      if (this.newItem == "") return;
      this.todos.push({
        item: this.newItem
      });
      this.newItem = "";
    },

insertは普通にpush()すればOKです。

read

基本、v-forするだけ。

<li v-for="todo in todos">
  {{todo.item}}
</li>

update

data内の値を更新する際には、配列または変数に直接値を渡しても(コンソール上は値の変更ができていますが)vue全体では双方向バインドしないです。データの更新は、$set()を使った方法を使って、動的に値を変更します。

html

<!--html-->
<div id="app">
  <div v-for="i in flagArray">
    <input type="checkbox" v-model="flagList[i]">
  </div>
</div>

js

var app = new Vue({
  el: '#app',
  data: {
    flagList: {}
  },
  computed: {
    flagArray: {
      return this.$store.getters.flags;
    }
  },
  methods: {
    setFlag: function () {
      for (var i = 0; i < this.flagArray.length; i++) {
        this.flagList[i] = this.flagArray[i]; ←ここで代入
      }
    }
  }
})

変更

methods: {
    setFlag: function () {
      for (var i = 0; i < this.flagArray.length; i++) {
        // this.$set(array, key, val);
        this.$set(this.flagList, i, this.flagArray[i]); ←これに変更
      }
    }
  }

delete

var app = new Vue({
  el: '#todoList',
  data: {
    newItem: "",
    todos: []
  },
  methods: {
    createItem: function(event) {
      ...
    },
    updateItem: function(todo) {
      ...
    },
    deleteItem: function(todo) {
      var index = this.todos.indexOf(todo);
      this.todos.splice(index, 1)
    }
  }
  ...

削除するindexを拾って、splice()です。