使用 _uid 和迭代

Question

我正在尝试根据数据数组迭代并选中一些框。我尝试这样做的方式（使用 _uid）似乎没有用。

JS:

//The second checkbox will be checked by default
var build = [true, true, false]

let enhancements = [
  {
    name: "Action One"
  },
  {
    name: "Action Two"
  },
  {
    name: "Action Three"
  }
]

Vue.component('cleanse-checkbox', {
  props: ['enhancement'],

  data() {
    return {
      isSelected: 'action-point-on',
      notSelected: 'action-point-off',
      build: build[this._uid-1]
    };
  },

  template: `
    <div class="mb-2">
      <p>{{ build }}</p>
      <button :class="[isActive ? isSelected : notSelected, notSelected]" 
        v-on:click="toggleEnhancement">{{ enhancement.name }}</button>
    </div>
  `,

  computed: {
    isActive: function () {
      return this.build;
    }
  },

  methods: {
    toggleEnhancement: function() {
      this.build = this.build == 0;
      this.$emit('toggle-enhancement', [this._uid-1, this.build])
    }
  }
});

var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    build: build,
    enhancements: enhancements
  },

  methods: {
    updateEnhancement: function (value) {
      this.build[value[0]] = value[1]
    }
  }
});

HTML

<div id="app">
    <p>${ build }</p>
    <cleanse-checkbox v-for="enhancement in enhancements"
                      :enhancement="enhancement"
                      v-on:toggle-enhancement="updateEnhancement">    </cleanse-checkbox>
</div>

是否有合适的 'vue' 方法来完成这样的事情？还是我使用不正确的语法在正确的轨道上？这是 fiddle：https://jsfiddle.net/wb37t84j/

Answer 1

您在 Vue 中遇到了“gotcha”。 Vue 无法检测到您在此行所做的更改。

this.build[value[0]] = value[1]

此外，我会避免使用 _uid。这是您的代码的一个版本。

let build = [true, true, false]

let enhancements = [
  {
    name: "Action One"
  },
  {
    name: "Action Two"
  },
  {
    name: "Action Three"
  }
]

Vue.component('cleanse-checkbox', {
  props: ['enhancement', 'build'],

  data() {
    return {
      isSelected: 'action-point-on',
      notSelected: 'action-point-off',
      internalBuild: this.build
    };
  },

  template: `
    <div class="mb-2">
      <p>{{ build }}</p>
      <button :class="[isActive ? isSelected : notSelected, notSelected]" 
        v-on:click="toggleEnhancement">{{ enhancement.name }}</button>
    </div>
  `,

  computed: {
    isActive: function () {
      return this.internalBuild;
    }
  },

  methods: {
    toggleEnhancement: function() {
      this.internalBuild = !this.internalBuild
      this.$emit('toggle-enhancement', this.enhancement, this.internalBuild)
    }
  }
});

var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    build: build,
    enhancements: enhancements
  },

  methods: {
    updateEnhancement: function (enhancement, build) {
      Vue.set(this.build, this.enhancements.indexOf(enhancement), build)
    }
  }
});

这是修改后的模板

<div id="app">
    <p>${ build }</p>
    <cleanse-checkbox v-for="(enhancement, index) in enhancements"
                      :enhancement="enhancement"
                      :build="build[index]"
                      v-on:toggle-enhancement="updateEnhancement">    
     </cleanse-checkbox>
</div>

使用 _uid 和迭代

Using _uid and Iteration

vue-component

vuejs2