Vue

by ALENG

HTML

<div id="app">
    <button @click="setNewData">Set Data</button>
    <br>
    <br>
    <select v-model="selected">
      <option>0</option>
      <option>1</option>
      <option>2</option>
    </select>
    <div v-for="item in data" :key="item.id">
      <p>{{item.name}}</p>
      <p>{{item.time}}</p>
      <button @click="$set(item.time,selected,true)">Change True</button>
      <button @click="$set(item.time,selected,false)">Change False</button>
    </div>
  </div>

CSS

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

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

Vue

new Vue({
  el: "#app",
  data() {
    return {
      selected: 0,
      presetData: [true, true, true],
      data: [
        {
          name: "name 1",
        },
        {
          name: "name 2",
        }
      ]
    };
  },
  methods: {
    setNewData() {
      this.data.forEach((o, i) => {
        this.$set(this.data[i], "time", this.presetData);
      });
    },
  }
})