クラスを使用したVueインスタンス

Question

私はVueを初めて使い、いくつか質問があります。しかし、私が実行している問題は、解決方法がわからないと思います。

私のコードには<div class="foo">が少しあります。 Vueインスタンスを使用してこれらのファイルと対話したい。したがって、すべての要素がdiv.fooappで管理可能になり

var app = new Vue({ 
    el: 'div.foo', 
    data: { 
    message: 'bar' 
    } 
}) 

：私のようなものを使用するように考えていました。しかし、どうすれば私が働いている要素を正確に得ることができますか？

のは、我々はこれを持ってjQueryの中で言ってみましょう...

$("div.foo").click(function() { 
    console.log($(this)); 
}) 

コードは、すべてのdiv.fooのために動作しますが、印刷は、単にクリックした要素が表示されます。

Answer 1

あなたが提案していることはできませんが、セレクタに一致する要素ごとに新しいVueを作成することができます。

それぞれはそれ自身の状態を保持します。

const vues = document.querySelectorAll(".app"); 
Array.prototype.forEach.call(vues, (el, index) => new Vue({el, data:{message: "hello " + index}})) 

Example。あなたはdata.message = "new value"ような何かを行うことができ、すべてVuesが変化するであろうポイント

const vues = document.querySelectorAll(".app"); 
const each = Array.prototype.forEach; 
const data = { 
    message: "hello world" 
}; 
each.call(vues, (el, index) => new Vue({el, data})) 

れる

あなたが共有状態を望んでいた場合は、。

Example 2。

これは私がでも遊んでいるだけです。 1つのVueを作成し、すべてfooを管理することをお勧めします。

Answer 2

さらに、js/tsファイルからhtmlにアクセスする場合は、vueのrefシステムを使用できます。

例：

<template> 
<div ref="example">example</div> 
</template> 

example.js：

var myExampleDiv = this.$refs.example; 

やあなたが使用している場合typescriptです

example.ts：この方法の詳細については

const myExampleDiv = this.$refs.example as HTMLElement; 

： https://vuejs.org/v2/api/#vm-refs