Vue inputのvalueを取得する。

Question

###問題点
私はVueの入力された値を取得したいと思っていますが、
取得ができていません。
v-forで回した後にその各、値を取得するためにはどのようにすれば良いでしょうか。
v-modelで取得しようと思って調べていますが間違っていますでしょうか。
大まかなところは消しています。

<v-row v-for="field in textFields" :key="field.name">
 <v-col>
  <v-text-field solo 
     :v-model="textValues" 
     :placeholder="field.name" 
     :type="field.type"></v-text-field>
 </v-col>
</v-row>
 <v-btn text @click="buttonClick">{{ buttonValue }}</v-btn>
<script src="./StackedForm.ts"></script> 

export default class StackedForm extends Vue {
  private textFields:any = [
  {
      name: "名前",
      type: "text"
    },
  ];
  private buttonClick(): void {
    console.log(this.textValues);
  }
}

Answer 1

Vue.jsは触ったことがないので、あっているか自信はないですが、v-modelの前にあるコロン「:」が要らないと思います。

ちなみにjsfiddle上のVue.js環境にvuetifyのcdnを入れて、
以下のコードを実行するときちんと入力値が取れました。
（ちなみに下記のコードのv-modelの前にコロン「:」を付けると入力値が取れなくなります。）

HTML

<div id="app">
  <v-row v-for="(field, index) in textFields" :key="field.name">
    <v-col>
      <v-text-field solo 
        v-model="textFields[index].value" 
        :placeholder="field.name"
        :type="field.type">
      </v-text-field>
    </v-col>
  </v-row>
  <v-btn text @click="buttonClick">{{ buttonValue }}</v-btn>
</div>

JS

new Vue({
  el: "#app",
  data: {
    textFields: [
      {
        name: "名前",
        type: "text",
        value: "",
      },
      {
        name: "住所",
        type: "text",
        value: "",
      }
  	],
    buttonValue: "保存"
  },
  methods: {
    buttonClick: function() {
      console.log("名前=" + this.textFields[0].value);
      console.log("住所=" + this.textFields[1].value);
  	}
  }
})

参考にしたサイト
https://forum.vuejs.org/t/how-to-use-v-model-inside-the-v-for-loop-in-order-to-access-a-current-object/7764/3

Comments

[django]

ありがとうございます。うまくいきました。