Компонент VueJS вычисляет свойства из массива - PullRequest
Новая
       2

Компонент VueJS вычисляет свойства из массива

0 голосов
/ 19 марта 2019

У меня есть магазин, который содержит задачи.У меня есть объект Vuejs, который использует компонент задачи, и даю задачу компоненту, у которого есть некоторые свойства (task_id, имя_задачи, create_by, ...).

В моем компоненте задачи я хочу использовать егосвойства без префикса (таким образом, имя задачи задано в data.task_name [передано задание obj как данные]).

Могу ли я создать массив и указать вычисляемым свойствам сопоставить их как key => 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>
...