v-on：コンポーネントがクリックされていない場合

vue.jsコンポーネントは関数を呼び出すボタンを作成しますが、関数は呼び出されず、Chromeの要素検査ではv-on：clickは表示されません。私の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：コンポーネントがクリックされていない場合

答えて

関連する問題