Привязка формы Vue к списку - PullRequest
0 голосов
/ 04 июня 2019

Я ищу способ удалить привязку для вновь добавленного элемента в список.

При добавлении первого элемента из формы, элемент был добавлен в список, но когда я хочу добавить еще один, эта форма ссылается на предыдущий элемент в списке, двусторонняя привязка данных работает, что нежелательно для меня . В форму следует добавлять новые элементы, а не ссылаться на недавно добавленные.

Как это сделать? Могу ли я сделать это с v-моделью?

@ EDIT

Я пытался обойти это через Object.assign при добавлении элемента, но во время проверки элемента vuex ссылается на оба новых элемента.

На данный момент проблема с флажком, который работает для всех новых элементов, а не для конкретного На мой взгляд, стоит как-то отключить двустороннюю привязку данных

Vue.use(Vuetify,{
 iconfont: 'fa'
});
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    reviews: [
    	{
      	name: 'Mazda',
        id: 4324214,
        repairs: [
        	{
          	name: 'rear window',
            done: false,
          },
          {
          	name: 'backlight',
            done: false,
          }
        ]
      },
      {
      	name: 'Audi',
        id: 12134145,
        repairs: [
        	{
          	name: 'front tire',
            done: true,
          },
          {
          	name: 'door',
            done: true,
          }
        ]
      }
    ]
  },
  mutations: {
    ADD_REVIEW(state, review) {
      state.reviews.push(review);
    },
    SET_REVIEW_REPAIRS(state, { id }) {
      let same = item => item.id == id;
      let review = state.reviews.find(same);
      let reviewIndex = state.reviews.findIndex(same);
      console.log('check:',id)
      
      let isNotComplate = review.repairs.some(val => val.done == false)
      let done = (isNotComplate) ? true : false;

      let mapReviewRepairs = review.repairs.map((val, key) => {
        val.done = done;
        return val;
      });
      state.reviews[reviewIndex].repairs = mapReviewRepairs;
    },
  },
  getters: {
  	reviews: state => state.reviews
  }
})

new Vue({
  store,
  el: "#app",
  data: {
    form: {
    	name: 'BMW',
      repairs: [
      		{
          	name: 'front tire',
            done: false,
          },
          {
          	name: 'door',
            done: false,
          }
      ]
    }
  },
  computed: {
  	reviews() {
    	return this.$store.getters['reviews']
    }
  },
  methods: {
     add() {
     	let id = Math.floor((Math.random() * 10000000)); 
      this.form.id = id;
      let newReview = Object.assign({}, this.form);
     	this.$store.commit('ADD_REVIEW', newReview)
     
     },
     toggleRepairs(id) {
     	this.$store.commit('SET_REVIEW_REPAIRS', { id })
     },
  }
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.4.0/vuetify.min.js"></script>
<div id="app">
  <v-app>
    <v-list>
      <v-list-tile v-for="(item, index) in reviews" :key="item.id">
           <v-list-tile-content>
             {{ item.name }}
           </v-list-tile-content>
           <v-list-tile-action>
             <v-icon color="black"
             v-bind:class="item.repairs.some(val => val.done == false) ? 'grey--text' : 'success--text'"
             @click="toggleRepairs(item.id)"
             >
               fas fa-check
             </v-icon>
           </v-list-tile-action>
      </v-list-tile>
    </v-list>
    <h1 class="display-2">Form</h1>
    <form style="width: 300px">
      <v-text-field v-model="form.name" label="Car name"></v-text-field>
      REPAITS: <span v-for="repair in form.repairs">{{ repair.name }},</span>
    </form>
    <v-btn @click="add" style="bottom: 5em;" fab dark fixed right color="secondary">
        <v-icon dark>fas fa-plus</v-icon>
    </v-btn>
  </v-app>
</div>

@ РЕДАКТИРОВАТЬ2 РЕШЕНИЕ Object.assign не нарушает ссылку. Я делаю это

JSON.parse(JSON.stringify(this.form))
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...