Vue.js v-modelに設定した属性値を取得したい

Question

<input type=text label="テスト" v-model="test" @change="testChange($event, 1)" />
<input type=text label="テスト2" v-model="test2" @change="testChange($event, 2)" />

    testChange(e, index){
      console.log(e)
    }

要素に応じて@changeした際に、
v-modelにセットしている属性値を取得したいです。
(例)
・this.test
・this.test2

$eventの中身をコンソールで確認してもv-modelの項目がないので、
以下のようにhtmlのname属性とeval()を用いて強制的に行うことはできましたが、
evalを使わずに、v-modelにセットしている属性値を取得しできる方法はないのでしょうか。

<input type=text label="テスト" v-model="test" name="test" @change="testChange($event, 1)" />
<input type=text label="テスト2" v-model="test2" name="test2" @change="testChange($event, 2)" />

    testChange(e, index){
      if (index == 1) console.log(eval('this.' + e.target.name))
      if (index == 2) console.log(eval('this.' + e.target.name))
    }

Answer 1

質問文だけから回答するならe.target.valueだけど
質問に書いてない部分の情報が明らかに足りない。
データプロパティやコンポーネントならpropsで定義するのがVueの普通の使い方なのでv-modelから取得しようと発想してる時点で間違えてる。

const app = Vue.createApp({
  data() {
    return { test: "test" }
  },
  methods: {
    testChange(event, index) {
      console.log(this.test);
    }
  }
})

Comments

[omame23]

回答いただきありがとうございます。

おっしゃる通りv-modelに格納された文字列を取得するのは e.target.value で可能であるということは認識しております。もちろんdataにもtestは設定済ですのでthis.testでもしかりです。このあたりは私の提示した内容が少なかったので申し訳ございません。

今回の質問はdataに設定済みの上で、各要素を更新またはクリックした場合にその要素に設定したv-modelのvalueではなくて属性値を取得したいと言うことです。

例えば、
data() {
return {
test: "合格" ,
test2: '不合格'
}
},

であった場合
合格ではなくtest
不合格ではなくtest2
といった要領です。

[omame23]

<input type=text v-model="test" @change="testChange($event, 1)" />
<input type=text v-model="test2" @change="testChange($event, 2)" />

v-modelの test と test2 です

Answer 2

testChange(e, index){
    console.log(e.target.value);
}