Question

我有一个包含任务的商店。我有一个Vuejs对象，它使用任务组件，并给该组件一个任务，该组件具有一些属性（task_id，task_name，created_by等）。

在我的任务组件中，我想使用其属性而没有前缀（因此task_name插入了data.task_name [通过任务obj作为数据]）。

我可以创建一个数组并告诉计算的属性将其映射为键=> this.data [key]来从数据对象获取值吗？

代码段中的一些示例代码。我是Vue的新手，并且不知道哪种方法是读取此类属性的最佳方法。

对于读写，我知道get-set方法，但是在这种情况下，这是一种方法。

const A_LOAD_TASKS = 'load-tasks';
const M_SET_TASKS = 'set-tasks';
const id = 1234;

// a vuex store for tasks
/*
example task: 

{
task_id: 123,
task_name: 'test task',
created_by: 123,
created_at: '2019-03-03 12:12:03',
task_done: false
}


*/

let store = new Vuex.Store({
        state() {
            return {
                tasks: {},
                isloaded: false,
                error: false
            }
        },
        mutations: {
            [M_SET_TASKS](state, tasks) {
                Vue.set(state, 'tasks', tasks);
            }
        },
        actions: {
            [A_LOAD_TASKS]({state, commit}) {
                
                $.post('/tasks/load_by_id', {id: id}, (r) => {
                    if (r.error) return someErrorMsg();
                    commit(M_SET_TASKS, r.data.tasks);
                });
            }
        },
})

new Vue({
        el: '#tasks',
        store,
        data() {
            return {}
        },
        created() {
            store.dispatch(A_LOAD_TASKS); // loading tasks
        },
        computed: {
            tasks() {
                return store.state.tasks;
            }
        }
})

Vue.component('task', {
            props: ['data'],
            computed: {
                task_id() {
                    return parseInt(this.data.task_id);
                },
                created_at() {
                    return this.data.created_at;
                },
                created_by() {
                    return parseInt(this.data.created_by);
                },
                task_done() {
                    return parseInt(this.data.task_done);
                },
                task_name() {
                    return this.data.task_name;
                },
                
                
                // !!! I want stg like this:
                ...(() => {
                  let obj = {};
                  ['task_name','task_id','created_at'].forEach((key) => {
                    if (key in this.data) obj[key] = this.data[key];
                  })
                  
                  return obj;
                })()
            }
	        template: `
            <tr>
              <td>{{task_id}}</td>
              <td>{{task_name}}</td>
              <td>...</td>
              <td>...</td>
              <td>...</td>
              <td>...</td>
            </tr>
          `
})

<div id="tasks">
  <template v-for="task in tasks">
    <task :data="task" :key="task.task_id"></task>
  </template>
</div>

VueJS组件从数组计算属性

0 个答案: