@ametamaposted at 2023-01-11

Vue.js でselectの値を受け取る方法を教えてほしいです

Q&A

HTML 初心者 Vue.js

解決したいこと

Vue.js と HTML を勉強しているのですが、自分のやろうとしていることが手詰まり状態になってしまい、解決できなかったので質問を投稿させていただきました。

・やりたいこと
select 欄で選んだ数値を、button を押すことで渡して、その計算結果を表に入力させたい

・聞きたいこと
select の値をJavaScript 側で受け取るための方法を教えてほしい。
配列のv-forの使い方を間違えていると思うので正しい方法を教えてほしい。
足りない宣言などがあれば教えてほしい

よろしくお願いします。

該当するソースコード

<!DOCTYPE html>

<html>
  <head>
    <meta charset = "utf-8">
    <title>キャッシュメモリの学習アプリ</title>

    <link rel="stylesheet" href="css/style.css">
    <script src="vue.js"></script>
  </head>

  <body>
      <label for="selectA"> A </label>
      <select v-model="selectA">
        <option> --- </option>
        <option> 4 </option>
        <option> 8 </option>
      </select>

      <label for="selectB"> B </label>
      <select v-model="selectB
">
        <option> --- </option>
        <option> 32 </option>
        <option> 64 </option>
        <option> 128 </option>
        <option> 256 </option>
      </select>

    

      <button v-on:click="start()"> 求める </button>

    
      <div id="bitTable">
      
        <table border="1" >
          <tr> 
            <th> 和 </th>
            <th> 積 </th>
          </tr>

          <tr v-for="ans in answers">
            <td> {{ ans.answer }} </td>
          </tr>
        </table>
      </div>

      

    <script src="test.js"></script>
    
  </body>
</html>

js (test.js)

//配列の宣言
const answers= [{answer:"add"}, {array:"mul"}]

start(){
    //selectで選んだAを受け取る
    let x = ;

    //selectで選んだBを受け取る
    let y = ;

    add = x + y;

    mul = x * y;
}

1Answer

@culage posted at 2023-01-11

足りない宣言などがあれば教えてほしい

そもそもjavascriptが文法エラーになっているので当然何一つ動きません。

select の値をJavaScript 側で受け取るための方法を教えてほしい。

例えば以下のようにしてselectの値をjavascriptで受け取ってメッセージに表示できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>

<div id="vue-area">
  <select v-model="selectedValue">
    <option> 32 </option>
    <option> 64 </option>
    <option> 128 </option>
    <option> 256 </option>
  </select>
  <button type="button" v-on:click="button_click()">button</button>
</div>

<script>
var app1 = new Vue({
  el: '#vue-area',
  data: { selectedValue: null },
  methods: {
    button_click: function() {
      alert(this.selectedValue);
    }
  }
})
</script>

</body>
</html>

配列のv-forの使い方を間違えていると思うので正しい方法を教えてほしい。

例えば以下のようにしてv-forを使って配列の内容を表示することができます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>
<body>

<div id="vue-area">
  <table border="1" >
    <tr> 
      <th> field1の値 </th>
      <th> field2の値 </th>
    </tr>
    <tr v-for="ans in answers">
      <td> {{ ans.field1 }} </td>
      <td> {{ ans.field2 }} </td>
    </tr>
  </table>
</div>

<script>
var app1 = new Vue({
  el: '#vue-area',
  data: {
    answers: [
      {field1:"hoge"    , field2:"fuga"},
      {field1:"hogehoge", field2:"fugafuga"}
    ]
  }
})
</script>

</body>
</html>

2Like

Comments

@ametama
Questioner
回答していただきありがとうございます。
v-forの使うべき状況というものをしっかりと理解できていなかったので、自分のやるべきことを見直すヒントになりました。

selectの値を受け取る方法に関して追加で質問をさせていただきたいのですが、selectの値に応じて返す値を変えるプログラムを作る際に、

x = this.selectedValue

という形で変数に代入することも可能なのでしょうか。

教えていただけると幸いです。
@culage
はい、可能です。

しかしそのような質問が出てくるということから察するに、あなたはVue.jsを利用できる力量に達していません。
まずプログラム言語の入門書などを読んで基礎的な知識を学習すべきでしょう。
@ametama
Questioner
返答ありがとうございます。
おっしゃる通りHTML自体も勉強を始めたばかりの状態です。
基礎を重点的に学んでから触れていこうと思います。
今回は教えていただきありがとうございました。

Are you sure you want to delete the question?