【Vue.js】clickで実行されるmethodsに引数を渡せない

Question

前提・実現したいこと

Vue.jsでスタートボタンを押すとラベル内に入力した値を引数としてmethodsに渡すプログラムを作りたいのですがエラーが出てしまいます。

発生している問題・エラーメッセージ

error  'textInput' is defined but never used  no-unused-vars

該当のソースコード

<template>
  <div id="app">
      <h3>
        <label for="name">value : </label><input type="number" v-model="textInput" id="name" name="name">
      </h3>
      <div>
        <button type="button" @click="test_post(textInput);" style="width:120px;height:50px">start</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      textInput:'',
    }
  },
  methods: {
    test_post(textInput){
              this.axios.post('http://IPアドレス:ポート番号/result?value=textInput')
              .then(res =>{
                console.log(res.data)
              })
    }
  }
}
</script>

お力添えをいただけますと幸いです。よろしくお願いいたします。

Answer 1

error 'textInput' is defined but never used no-unused-vars

変数textInputを定義だけして、どこにも使っていないからです。
おそらく、EsLintを使っているんだと思いますが、その場合は
定義した変数は必ずどこかで使用する必要があります。

それを踏まえソースを見ると、一見変数を引数に埋め込んでるように見えますが

this.axios.post('http://IPアドレス:ポート番号/result?value=textInput')

シングルクオートで囲っているためtextInputもパスを列記した文字列の一部でしか認識されません。jsの基本の部分です。

なので+で連結するか、IE度外視で問題ないならバッククォートと$で変数を埋め込むこともできます。

//基本的な方法
this.axios.post('http://IPアドレス:ポート番号/result?value='+textInput)
//埋め込む。IEは対応してません
this.axios.post(`http://IPアドレス:ポート番号/result?value=${textInput}`)

Comments

[bbb3ohbbb]

無事エラーが無くなり実行することが出来ました。
初歩的な質問に対しても丁寧な回答を頂きありがとうございました。