使用_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' 的方式來完成這樣的事情？還是我在正確的軌道上使用不正確的語法？這裏有一個小提琴：https://jsfiddle.net/wb37t84j/

Answer 1

你在Vue公司跌進「gotcha」。 Vue無法檢測到您在此行上所做的更改。我想避免使用_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>