Vue에서 Materialize Chips를 능숙하게 사용하는 방법

Materialize라는 CSS 프레임워크는 다양한 것을 제공합니다.
이번Chips은 Vue입니다.다음은 js에서 익숙하게 사용하는 방법을 소개한다.

칩스 준비.

먼저 Chips 를 화면에 표시합니다.
이번에는 Vue를 사용하기 때문에 Vue 파일에 써야 합니다.
Test.vue

<template>
  <div class="chip">
    aaaaa
    <i class="close material-icons">close</i>
  </div>
</template>

이렇게 하면 아래의 화면이 된다.

여기 있다×」버튼을 누르면 프론트에서 aaaaa라는 Chips를 삭제합니다
페이지를 업데이트하면 aaaaa 도 표시됩니다.

Vue를 통해 API에서 데이터 가져오기 및 제거

따라서 vue 파일에 다음과 같은 설명을 추가합니다.
계속 사용axios.
Test.vue

<template>
  <div
    v-for="(test, index) in tests" :key="index"
    class="chip"
  >
    {{ test.title }}
    <i class="close material-icons">close</i>
  </div>
</template>

<script>
import axios from 'axios';

data: function () {
    return {
      tests: [],
    }
  },

  mounted: function () {
    this.fetchTests();
  },

  methods: {
    fetchTests: function () {
      axios
      .get('/api/tests')
      .then((res) => {
        for (var i = 0; i < res.data.tests.length; i++) {
          this.tests.push(res.data.tests[i]);
        }
      }, (error) => {
        console.log(error);
      });
    },

    deleteTest: function (test_id) {
      if ( confirm('投稿を削除しますか？') ) {
        axios
        .delete('/api/tests/' + test_id)
        .then((res) => {
          var test_title = res.data.test.title;
          M.toast({html: '「' + test_title + '」の情報を削除しました'});
        }, (error) => {
          console.log(error);
        });
      }
    },
  },
</script>

여기에는 api/tests 및 id 정보가 있습니다.test_title로 각각 취득하다.
위의 변경 사항 중 v-for 의×」버튼을 누르면
자세한 내용을 확인한 후×」버튼을 누르면Chips 더 이상 표시되지 않습니다!

번외편(칩스로 날아가는 상세한 내용)

Chips 의 "×」버튼을 누르지 않은 곳
데이터의 세부 내용을 표시합니다.
Test.vue

<template>
  <div
    v-for="(test, index) in tests" :key="index"
    v-on:click="setTestInfo(test.id)"
    class="chip"
  >
    {{ test.title }}
    <i class="close material-icons">close</i>
  </div>

  <div class="row" v-if="testInfoBool === true">
    <div class="col s12 m12">
      <div class="card amber darken-4">
        <div class="card-content white-text">
          <span class="card-title">
            {{ tesuInfo.id }}：{{ testInfo.title }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

data: function () {
    return {
      tests: [],
      testInfo: {},
      bInfoBool: false,
    }
  },

  mounted: function () {
    this.fetchTests();
  },

  methods: {
    fetchTests: function () {
      axios
      .get('/api/tests')
      .then((res) => {
        for (var i = 0; i < res.data.tests.length; i++) {
          this.tests.push(res.data.tests[i]);
        }
      }, (error) => {
        console.log(error);
      });
    },

    setTestInfo: function (test_id) {
      axios
      .get('api/tests/' + test_id)
      .then((res) => {
        this.testInfo     = res.data.test;
        this.testInfoBool = true;
      }, (error) => {
          console.log(error);
      });
    },

    deleteTest: function (test_id) {
      if ( confirm('投稿を削除しますか？') ) {
        axios
        .delete('/api/tests/' + test_id)
        .then((res) => {
          var test_title = res.data.test.title;
          M.toast({html: '「' + test_title + '」の情報を削除しました'});
        }, (error) => {
          console.log(error);
        });
      }
    },
  },
</script>

현재 상황을 보면 이 설명이 추가되더라도 "×」버튼 누르는 곳Chips과setTestInfo 두 가지 반응.
따라서 deleteTest의 설명을 변경합니다.
Test.vue

<template>
  <div
    v-for="(test, index) in tests" :key="index"
    v-on:click.self="setTestInfo(test.id)"
    class="chip"
  >
    {{ test.title }}
    <i class="close material-icons">close</i>
  </div>
</template>

<script>

・・・

v-on:click 후에만 추가<template>요소 자체가 눌렸을 때만 프로세서를 호출합니다.

참고 자료

Chips - Materialize
이벤트 처리 - Vue.js