v-on：點擊組件不工作

vue.js組件創建一個應該調用函數的按鈕，但該函數從未被調用，並且v-on：click在Chrome的元素檢查中不可見。我的HTML是這樣的：v-on：點擊組件不工作

<bottomcontent></bottomcontent>

我的Vue公司是這樣的：

var bottomcontent = { 
    template: '<div class="bottomcontent"><div class="moreresults" v-on:click="appendcontent">More Results</div></div>' 
} 
new Vue({ 
    el : 'body', 
    data : { 
    homepage:{ 
     numberofdivs: 60 
    } 
    }, 
    methods : { 
     appendcontent: function() { 
     homepage.numberofdivs += 60 
    } 
    }, 
    components: { 
    'bottomcontent': bottomcontent 
    } 
})

來源

2017-07-30 JFugger_jr

的問題是，methods必須使用funcions，而不是對象。

methods: { 
    appendcontent: function() { 
    homepage.numberofdivs += 60 
    } 
}

您還必須相應地更正您的標記。

var bottomcontent = { 
    template: '<div class="bottomcontent"> <div class="moreresults" v-on:click="appendcontent"> More Results </div></div>' 
}

來源

2017-07-30 13:39:36 Aer0

你是對有關方法的不接受的功能，所以我改變了代碼，但它仍然沒有工作。 –

您的代碼中可能有錯誤。它應該像預期的那樣工作，你可以在這裏看到：https://codepen.io/Aer0/pen/GvoGjq?editors=1010 – Aer0

有一些問題導致了破解。

在函數appendcontent中，應該調用數據「this.homepage.numberofdivs」。

和正確的演示張貼在https://jsfiddle.net/atsknydr/

methods : { 
    appendcontent: function() { 
    this.homepage.numberofdivs += 60; 
    console.log(this.homepage.numberofdivs); 
}

}

來源

2017-07-30 14:53:31 ThatToti

我相信他正試圖分離組件內的全部功能。你的解決方案有效，但是你殺了他的組件。 –

首先，作爲警告說：

[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

所以，你應該像<div id="app"></div>創建一個元素安裝您的應用程序，而不是<body>。

您面臨的問題是範圍問題。你正試圖從組件範圍內調用一個方法，這就是爲什麼它沒有找到方法。

看看docs以更好地理解。

所以，爲了做到這一點，您應該將方法從應用範圍更改爲模板範圍。

你HTML：

<body> 
    <div id="app"> 
     <bottomcontent></bottomcontent> 
    </div> 
</body>

你JS：

<script> 
var bottomcontent = { 
    template: '<div class="bottomcontent"><div class="moreresults" v-on:click="appendcontent">More Results</div></div>', 
    data: function() { 
     return { 
      homepage: { 
       numberofdivs: 60 
      } 
     } 
    }, 
    methods: { 
     appendcontent: function() { 
      console.log('Called method!'); 
      this.homepage.numberofdivs += 60 
     } 
    } 
} 

new Vue({ 
    el: '#app', 
    components: { 
     'bottomcontent': bottomcontent 
    } 
}) 
</script>

來源

2017-07-30 15:09:33

v-on：點擊組件不工作

回答

相關問題