Question

我从Vue.js开始，我根据项目ID /索引了解了ModuleNotFound。如果我尝试在{tours} tasks中splice()中使用某个项目，效果很好：

splice()

html

v-for

但是我无法data:{ tours: null, }, methods: { deleteTour: function (id) { if (confirm('Are you sure?')) { const index = this.tours.findIndex(item => item.id === id); if (~index) { axios.post('deleteTour.php', { "token": token, "tourID": id }).then((response) => { this.deleted = response; console.log(this.deleted); // splice tour this.tours.splice(index, 1); }).catch((error) => { this.errored = error; console.log(this.errored); }); } } }, }嵌套<div id="app" class="row mb-50"> <div v-for="(item, index) in tours" v-bind:key="item.id" id="tours" class="col-md-12 mb-30"> <ul class="pics-list"> <li v-for="(image, index) in item.images" ref="deleteItem" :class="{marginRightOpen: editingTour}"> <span :hidden="editingTour !== item.id" class="badge" @click="deleteImage(image.imageID, item.id, index)"> <i class="fa fa-fw fa-times-circle"></i> </span> <div class="pics-list-image-container img-fluid cursor-pointer" v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }" @click="openModal = true, showModal(image.image)"> </div> </li> <li v-if="urls && editingTour == item.id" v-for="(url, key) in urls" :key="key"> <div id="preview" :ref="'url'" class="pics-list-image-container img-fluid"> </div> </li> </ul> </div> </div>中的列表项。我尝试以多种方式使用splice()，但没有用。

v-for

我想删除包含徽章图标的整个第一个列表项。可以这样做吗？

Answer 1

如果我们为模板中的v-for索引使用不同的变量名，则可以在deleteImage中引用这些不同的索引：

<div id="app" class="row mb-50">
   <div v-for="(item, indexItem) in tours" v-bind:key="item.id" id="tours" class="col-md-12 mb-30">
      <ul class="pics-list">
         <li v-for="(image, indexImage) in item.images" ref="deleteItem" :class="{marginRightOpen: editingTour}">
            <span :hidden="editingTour !== item.id" class="badge" @click="deleteImage(image.imageID, item.id, indexItem, indexImage)">
            <i class="fa fa-fw fa-times-circle"></i>
            </span>
            <div class="pics-list-image-container img-fluid cursor-pointer" v-bind:style="{'background-image': 'url(http://localhost/tours/'+image.image + ')' }" @click="openModal = true, showModal(image.image)">
            </div>
         </li>
         <li v-if="urls && editingTour == item.id" v-for="(url, key) in urls" :key="key">
            <div id="preview" :ref="'url'" class="pics-list-image-container img-fluid">
            </div>
         </li>
      </ul>
   </div>
</div>

然后在deleteImage中输入

：

deleteImage: function (id, tourID, indexItem, indexImage) {
   if (confirm('Are you sure?')) {

      // it could be done here
      // this.$refs.deleteItem.splice(index, 1);
      this.tours[indexItem].images.splice(indexImage,1)

      axios.post('deleteImage.php', { "token": token, "tourID": tourID, "imageID": id })
           .then((response) => {
               console.log(response);

               // or here
               this.$refs.deleteItem.splice(index, 1);
        }).catch((error) => {
               this.errored = error;
               console.log(this.errored);
        });
      }
},

通常，$refs并不是Vue documentation的理想解决方案：

$ refs仅在呈现组件之后填充，并且它们是无反应的。它只是作为直接子级操作的转义窗口-您应避免从模板或计算的属性中访问$ refs。

Answer 2

基于我更改的Cato Minor评论

node filename

收件人：

deleteImage: function (id, tourID, index) {
    this.$refs.deleteItem.splice(index, 1);

其中deleteImage: function (id, tourID, i, index) { this.tours[index].images.splice(i, 1);是i的图像索引，而<li v-for="(image, i) in item.images"是index的游览索引

Vue js无法从嵌套v-for中拼接项目

2 个答案: