Блог

Я пытаюсь удалить элемент из своего списка , я использую оператор удаления js , но он не может, вот код

HTML :

 lt;ol v-if="status"gt;  lt;li v-for="(item, key) in items" :key="item.title"gt;  {{ item.title }} - Type - {{ item.type }}  lt;input v-model="item.type" type="text" value="{{ item.type }}" style="margin-left: 2%;" /gt;  lt;button @click="delete items[key]"gt;Remove Itemslt;/buttongt;  lt;/ligt;  lt;/olgt;  

JS :

 const sample = {  data() {  return {  newItem: [  {title: "", type: ""}  ],  subject: 'Vue.js',  items: [  { title: 'Javascript', type: 'Native'},  { title: 'Vue', type: 'Framework'},  { title: 'React', type: 'Framework'},  { title: 'Angular', type: 'Framework'},  ],  item: 'Javascript',  status: 1  }  }, }  Vue.createApp(sample).mount('#app')  

вам нужно объявить правильный метод для вашего @click события:

 lt;button @click="deleteItem(key)"gt;Remove Itemslt;/buttongt;  

затем в вашем vue methods разделе объявите эту функцию:

 methods:{  deleteItem(key){  this.items.splice(key, 1)  }, },  

ваш полный vue код будет таким :

 const sample = {  data() {  return {  newItem: [  {title: "", type: ""}  ],  subject: 'Vue.js',  items: [  { title: 'Javascript', type: 'Native'},  { title: 'Vue', type: 'Framework'},  { title: 'React', type: 'Framework'},  { title: 'Angular', type: 'Framework'},  ],  item: 'Javascript',  status: 1  }  },   methods:{  deleteItem(key){  this.items.splice(key, 1)  },  },  }  Vue.createApp(sample).mount('#app')  

Привет, В вашем @onclick вы неправильно используете свою функцию и чаще всего делаете что-то подобное :

 lt;ol v-if="status"gt;  lt;li v-for="(item, key) in items" :key="item.title"gt;  {{ item.title }} - Type - {{ item.type }}  lt;input v-model="item.type" type="text" value="{{ item.type }}" style="margin-left: 2%;" /gt;  lt;button @click="delete(item)"gt;Remove Itemslt;/buttongt;  lt;/ligt; lt;/olgt;  

И здесь delete-это функция для удаления элемента ur в элементах, подобных этой функции

 delete(item){  this.items.splice(item.title, 1) },