Question

我想用vue.js在按钮上添加一个元素到数组中，也许在单击时调用aggiungiViaggio方法，但是如何在当前居中找到三明治？

这是HTML部分的示例：

 <div class="row viaggio" v-for="catalogo in cataloghi"> 
<div class="row viaggio" v-for="viaggio in catalogo.viaggi">  </div>
</div>
     <button class="bottone-aggiungi-viaggio activeButton" 
       @click="aggiungiViaggio">Aggiungi viaggio</button>
    </div>

这是js：

var appCataloghi = new Vue({
  el: '#appCataloghi',
  data: {
    cataloghi: oggettoCataloghi.cataloghi
  },
  methods: {
    aggiungiViaggio: function() {
       this.viaggi.unshift({});
    }
  }
})

这是我创建数据的对象：

myObj ='{“ cataloghi”：[{“ id”：“ 1000”，“ nome”：“满足 europee“，” viaggi“：[{” id“：” 1423“，” nome“：” primoviaggioGSpagna“，” nazione“：” Spagna“， “ tipologia”： “ viaggiGuidati”}，{“ id”：“ 1424”，“ nome”：“ secondoviaggioGSpagna”，“ nazione”：“ Spagna”， “ tipologia”：“ viaggiGuidati”}]，“ descrizione”：“ Viaggi per clienti amanti del giappone“}，{” id“：” 1001“，” nome“：” viaggi giappone“，” viaggi“：[{” id“：” 1523“，” nome“：” scopertadelGiappone“，” nazione“：” Giappone“， “ tipologia”： “ itinerari”}，{“ id”：“ 1524”，“ nome”：“ Giappone”，“ nazione”：“ Giappone”， “ tipologia”：“ itinerari”}]}]}''

该方法无效。

Answer 1

只需在点击时传递项目

<div class="row viaggio" v-for="viaggio in catalogo.viaggi"> 
 <button class="bottone-aggiungi-viaggio activeButton" @click="aggiungiViaggio(viaggio)">Aggiungi viaggio</button>
</div>

如果需要，您甚至可以获取索引

<div class="row viaggio" v-for="(viaggio , viaggioidx)in catalogo.viaggi"> 
 <button class="bottone-aggiungi-viaggio activeButton" @click="aggiungiViaggio(viaggioidx)">Aggiungi viaggio</button>
</div>

方法签名更改为接受对象。（另外，最好先克隆它，然后再附加它，因为该对象以后可能会被编辑）

var appCataloghi = new Vue({
  el: '#appCataloghi',
  data: {
    cataloghi: oggettoCataloghi.cataloghi
  },
  methods: {
    aggiungiViaggio: function(viaggio) {
        var cloned = Object.extend({},viaggio); //Optional
       this.viaggi.unshift(cloned );
    }
  }
})

如何在vueJs中获取vue元素调用方法

1 个答案: