小编Mr.*_*way的帖子

我仍在学习 vue.js 并且处于一个小项目的中间，以帮助我了解有关使用 Vuex 创建更大规模应用程序的更多信息。

我遇到了一个问题，我试图使用应用程序中的按钮从数组中删除特定项目；我似乎无法在 Vuex 中获得正确的语法来执行此操作。这是我正在使用的内容：

店铺

const state = {
    sets: [{}]
}

export const addSet = function ({ dispatch, state }) {
    dispatch('ADD_SET')
}

const mutations = {
    ADD_SET (state) {
        state.sets.push({})
    },
    REMOVE_SET (state, set) {
        state.sets.$remove(set)
    }
} 

行动

export const removeSet = function({ dispatch }, set) {
    dispatch('REMOVE_SET')
}

吸气剂

export function getSet (state) {
    return state.sets
}

应用程序

<div v-for="set in sets"> 
    <span @click="removeSet">x</span>
    <Single></Single>
</div>

我有一个操作设置，它将向数组添加一个空白项目，当您单击add item按钮时，它将在应用程序中放置一个新组件，只是不确定如何remove item …

我正在尝试使用vuex将一个数组从我的api拉到一个组件,但是我很茫然,并且可能在我的脑海中尝试这个.随着api直接从一个组件访问我有它设置像这样,它很好:

data () {
 return {
  catalog:[],
 }
},
created() {
 this.$http.get('https://example.net/api.json').then(data => {
  this.catalog = data.body[0].threads;
 })
}

作为参考,json看起来类似于:

[{
"threads": [{
 "no: 12345,
 "comment": "comment here",
 "name": "user"
}, {
 "no: 67890,
 "comment": "another comment here",
 "name": "user2"
}],

//this goes on for about 15 objects more in the array

 "page": 0
}]

当我把这一切都移到商店时,我正在失去对如何实现这项工作的把握.我之前从未使用过vuex资源.

//store.js

state: {
    catalog: []
},
actions: {
    getCatalog({commit}){
        Vue.http.get('https://example.net/api.json').then(response => {
            commit('LOAD_CATALOG', response.data.data)
        });
    }
},
mutations: {
    LOAD_CATALOG (state) {
        state.catalog.push(state.catalog)
    } …

我正在尝试在我的应用程序中设置一些内容,我可以从列表中选择一个选项,并根据所选内容更改应用程序的背景.

假设我有一个列表:

<li v-for="item in items">
    <label class="radio">
        <input type="radio" value="{{ item.name }}" v-model="itemSelection">
            {{ item.name }}
    </label>
</li>

items是一个存储在我的数组store.js:

items: [
   {name: 'item1', img: 'placehold.it/200x200-1'}
   {name: 'item2', img: 'placehold.it/200x200-2'}
   {name: 'item3', img: 'placehold.it/200x200-3'}
],

因此,当您选择item1我不仅要从选择中拉出名称(将其传递给父组件itemSelection以显示在那里),而且还要将img链接放在css中以更改正文的背景.我不完全确定如何去做,因为我对vue很新,这基本上是我正在建立的东西,以帮助我学习!

谢谢!

这可能有一个简单的解决方案，自从我使用 vue 以来已经有一段时间了：

我试图将从颜色列表中提取的数据传递到内联 css 中以更改每个项目的背景颜色，这是一个示例：

<ul>
  <li v-for="color in colors">{{ color.value }}</li>
</ul>

<script>
  new Vue({
    el: '#main',
    data: {
        colors: [
            { value: '#00205b'},
            { value: '#0033a0'},
            { value: '#0084d4'}
        ],
    }
  })
</script>

我想使用从中提取的数据color.value并将其放入类似的东西中v-bind:style="background-color: { color.value }"，但我不知道如何让它发挥作用。