0

у меня еще есть мысль что нужно создавать метод в родителе, но в таком случае я не знаю как из дочернего компонента вызвать метод который в родителе

Vue.component('child', {
  props: ['item','key2'],
  template: `
    <li>
      {{ item }}
      <button @click="removeItem(key2)">remove</button>
    </li>
  `,
  methods:{
    removeItem: function(id){
      console.log(id)
      //что нужно дописать тут, что б из родительского компонента удалить объект по которому кликаю
    }
  }
})

new Vue({
  el:'#app',
  components:['child'],
  data:{
    list:{
      "1":'item 1',
      "2":'item 2',
      "3":'item 3',
      "4":'item 4',
      "5":'item 5',
      "6":'item 6',
      "7":'item 7' 
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<ul id="app">
  <child v-for="(item, id) in list" :item="item" :key2="id">s</child>
</ul>

1 ответ 1

2

Обратиться к "родительскому" объекту data можно с помощью this.$root.$data. Удалить же элемент, можно с помощью Vue.delete()

Стало быть в вашем случаи, ответом на вопрос, который написан комментарием в методе removeItem, будет выглядеть примерно так:

Vue.component('child', {
  props: ['item', 'key2'],
  template: `
    <li>
      {{ item }}
      <button @click="removeItem(key2)">remove</button>
    </li>
  `,
  methods: {
    removeItem: function(id) {
      console.log(this.$root.$data.list[id]);
      Vue.delete(this.$root.$data.list, id)
    }
  }
})

new Vue({
  el: '#app',
  components: ['child'],
  data: {
    list: {
      "1": 'item 1',
      "2": 'item 2',
      "3": 'item 3',
      "4": 'item 4',
      "5": 'item 5',
      "6": 'item 6',
      "7": 'item 7'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<ul id="app">
  <child v-for="(item, id) in list" :item="item" :key2="id">s</child>
</ul>

Однако, если всё-же делать более корректно (как справедливо заметил товарищ @yarkov_aleksei), то необходимо, создать метод в родителе и с помощью $emit уже обращаться к нему, таким образом:

Vue.component('child', {
  props: ['item', 'key2'],
  template: `
    <li>
      {{ item }}
      <button @click="removeItem(key2)">remove</button>
    </li>
  `,
  methods: {
    removeItem (id) {
      this.$emit('remove', id)
    }
  }
})

new Vue({
  el: '#app',
  components: ['child'],
  methods: {
    removeItem (id) {
      console.log(id)
      Vue.delete(this.list, id)
    }
  },
  data: {
    list: {
      "1": 'item 1',
      "2": 'item 2',
      "3": 'item 3',
      "4": 'item 4',
      "5": 'item 5',
      "6": 'item 6',
      "7": 'item 7'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<ul id="app">
        <child v-for="(item, id) in list"
  		  :item="item"
          :key2="id"
          @remove="removeItem">remove</child>
      </ul>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.