【Vue入門】@changeについて学ぼう

Vue2

ミニマリスト_カミ

kamiです。
TwitterとYoutubeもやってます。

今回は@changeについての紹介です。

@changeとは？

@changeは、特定のイベントが発生した際に呼び出されるイベントハンドラを指定するためのディレクティブです。
Vue.jsではv-onディレクティブを使用してイベントを監視します。

icon

v-onではなくv-modelでも監視できます。

@changeの構文

@change="methods名"

スポンサードサーチ

@changeでinputを使った例

<input type="text">要素のchangeイベントです。
inputの入力が終わるとchangeイベントが呼ばれます。

v-modelではinputのvalueが取得できます。

<template>
  <div>
    <label for="textInput">Enter Text:</label>
    <input type="text" id="textInput" v-model="inputText" @change="handleTextChange">
    <p>Entered Text: {{ inputText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  methods: {
    handleTextChange() {
      console.log('Text changed:', this.inputText);
    }
  }
};
</script>

@changeでradioを使った例

<input type="radio"> 要素に対するchangeイベントです。
ラジオボタンは通常、同じ名前（name属性）を持つ複数の選択肢から一つを選択するために使用されるので、v-modelでvalue要素を取得しています。
セレクトの「Option 1」または「Option 2」が取得できます。

<template>
  <div>
    <input type="radio" id="option1" value="Option 1" v-model="selectedOption" @change="handleRadioChange">
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" value="Option 2" v-model="selectedOption" @change="handleRadioChange">
    <label for="option2">Option 2</label>

    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  },
  methods: {
    handleRadioChange() {
      alert('Selected Option:', this.selectedOption);
    }
  }
};
</script>

スポンサードサーチ

@changeでselectを使った例

<select> 要素を使用して選択肢を提供し、その選択が変更されたときにchangeが呼ばれます。
v-modelではselectのvalueを取得できます。

セレクトの「Option 1」または「Option 2」が取得できます。

<template>
  <div>
    <label for="selectOption">Select an option:</label>
    <select id="selectOption" v-model="selectedOption" @change="handleSelectChange">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>

    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  },
  methods: {
    handleSelectChange() {
      alert('Selected Option:', this.selectedOption);
    }
  }
};
</script>

@changeでtextareaを使った例

<textarea>要素があり、v-modelディレクティブを使用してtextareaValueというデータプロパティと双方向バインディングされています。
v-modelではtextareaのvalueを取得できます。
textareaの入力が終わると、@changeイベントを使用して、methodsを呼び出しています。

<template>
  <div>
    <textarea v-model="textareaValue" @change="handleTextareaChange"></textarea>
    <p>Textarea Value: {{ textareaValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textareaValue: ''
    };
  },
  methods: {
    handleTextareaChange() {
      alert(`Textarea Value Changed: ${this.textareaValue}`);
    }
  }
};
</script>

スポンサードサーチ

@changeでfileInputを使った例

<fileInput>要素を使ってファイルをアップロードができる例になります。
multipleを使うことで複数のファイルを使うことができます。
ファイル選択されると、changeメソッドが呼ばれるようになっています。

<template>
  <div>
    <input type="file" ref="fileInput" multiple @change="handleFileInputChange">
    <button @click="uploadFiles">Upload Files</button>
    <div v-if="uploadedFiles.length > 0">
      <h2>Uploaded Files:</h2>
      <ul>
        <li v-for="(file, index) in uploadedFiles" :key="index">{{ file.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      uploadedFiles: []
    };
  },
  methods: {
    handleFileInputChange() {
      const selectedFiles = this.$refs.fileInput.files;

      // Log information about selected files to the console
      for (let i = 0; i < selectedFiles.length; i++) {
        console.log(`Selected File ${i + 1}:`);
        console.log(`Name: ${selectedFiles[i].name}`);
        console.log(`Type: ${selectedFiles[i].type}`);
        console.log(`Size: ${selectedFiles[i].size} bytes`);
        console.log('----------------------');
      }
    },
    uploadFiles() {
      const selectedFiles = this.$refs.fileInput.files;
      const formData = new FormData();

      // Append each selected file to FormData
      for (let i = 0; i < selectedFiles.length; i++) {
        formData.append('files[]', selectedFiles[i]);
      }

      // Simulate file upload using axios (replace this with your actual file upload API call)
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        // Update uploadedFiles with the response data or handle as needed
        this.uploadedFiles = response.data.files;
      })
      .catch(error => {
        console.error('Error uploading files:', error);
      });
    }
  }
};
</script>

changeメソッドについての説明

changeメソッドが実装されている、選択された各ファイルに関する情報がコンソールにログとして表示されます。

  • name
  • type
  • size

clickイベントついての説明

Upload Files: ファイルをアップロードするためのボタンです。
ボタンがクリックされると、メソッドが呼び出されます。
メソッドでは選択されたファイルをFormDataに追加し、axiosを使用してサーバーへのファイルアップロードを模擬します。
uploadedFilesプロパティでアップロードされたファイル情報を保持しています。

Vue2Vue

Posted by kami