小编Pds*_*Ink的帖子

我在Vue上有这种奇怪的行为。我正在尝试渲染一个名为的对象的嵌套属性，descrizione并且可以正常工作！但是在控制台中，我收到了Vue的警告：

TypeError：无法读取未定义的属性“ descrizione”

这是我的代码：

的HTML

<div id="input-container">
  {{modello.lineaGialla.descrizione}}
  <input 
     class="styled-checkbox"
     type="checkbox"
     v-for="(servizio, index) in modello.lineaGialla.servizi" 
     v-bind:style="{left:servizio.x+'px',top:servizio.y+'px'}"
     v-model="servizio.selected"
     v-on:click="AddServizi(servizio.selected,servizio.nomeServizio)"
     />
  <br/>
  {{modello.lineaBlu.descrizione}}
  <input 
     class=""
     type="checkbox"
     v-for="(servizio, index) in modello.lineaBlu.servizi" 
     v-model="servizio.selected"
     v-on:click="AddServizi(servizio.selected,servizio.nomeServizio)"
     />
</div>

JSON格式

{
"lineaGialla": {
  "class":"gialla", 
  "selected": false,
  "descrizione": "Questa è linea gialla",
  "descrizione_breve":"descrizione breve gialla",
  "descrizione_lunga":"descrizione lunga gialla",
  "servizi": [
      {"nomeServizio":"servizio_giallo1","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":534,"y":83,"selected": false},
      {"nomeServizio":"servizio_giallo2","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":399,"y":259,"selected": false},
      {"nomeServizio":"servizio_giallo3","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc lunga","x":224,"y":262,"selected": false},
      {"nomeServizio":"servizio_giallo4","descrizione":"qui desc <br/> breve","descrizione_lunga":"qui desc …

我没有在线找到任何文档或示例，但是将多个道具传递给组件的正确方法是哪种？

这是我尝试过的：

在HTML中

<component:prop1="data1" :prop2="data2"></component>

在component.js中

props: ['prop1','prop2'],

但很奇怪地不起作用...

我使用v-for index创建动态id,问题是当我尝试使用bootstrap的数据目标链接div时

这不起作用

<button data-toggle="collapse" data-target="'#demo'+{{$index}}">EXPAND</button> 

            <br/>
            <div v-bind:id="['demo'+index]" class="collapse">
                {{service.sotto[index]}}
            </div>

那么如何正确使用data-target + index呢？

我试图从子组件调用父方法,但它似乎不起作用..这里的代码:

的index.html

<div class="percorso"v-on:removeall="pathlengthTozero()">
</div>

零件

Vue.component('lista-percorso', {
template:`
<div class="col-lg-2 col-xs-2">
    <div class="removeall pull-right" v-on:click="removeall()"></div>
</div>`,

    methods:{
    removeall : function(){
        this.listaSelezionati = [];
        this.$emit('removeall');
    }
}

父方法

    pathlengthTozero : function(){
       il_tuo_percorso = [''];
    }

似乎"pathlengthTozero"没有调用emit,这是正确的使用方法吗？

如何使用$ emit函数正确地将参数从子节点传递给父节点？在这里我做了什么

HTML

<lista-servizi-gialla :servizi="modello" v-on:centramappa="mappaCenter(x,y,selected)"></lista-servizi-gialla>

零件

template'
<span class="pull-right forward"
 v-on:click="centraNellaMappa(single.x,single.y,single.selected)"></span>',

methods:{
    centraNellaMappa : function(x,y,selected){
        this.$emit('centramappa',[x],[y],[selected]);
     }  
}

父母的功能

mappaCenter : function(x,y,selected){
    alert(x);
}   

'x'参数似乎无法识别

我正在练习一个简单的待办事项清单vue.js.我试图price在数组中加总.要做到这一点,我在里面写了一个小函数computed,但出了点问题,这是我的js:

var app= new Vue({
  el: "#app",
  data: {
    message: "Lista della spesa",
    seen: true,
    todos: [
      {msg: 'prezzemolo', price: 10},
      {msg: 'pomodori', price: 20},
      {msg: 'zucchine', price: 5}
    ],
  },
  methods: {
    addToDo: function() {
      if(this.nome && this.prezzo) {
        this.todos.push({msg: this.nome, price: this.prezzo});
      }
      this.nome   = "";
      this.prezzo = "";
    },
    RemoveThis: function(index) {
      this.todos.splice(index,1);
    }
  },
  computed: {
    totale: function() {
      var total = 0;

      this.todos.forEach(function() {
        total += this.todos.price …