Vue에서 Materialize Chips를 능숙하게 사용하는 방법
18377 단어 MaterializeVue.js
이번
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
Reference
이 문제에 관하여(Vue에서 Materialize Chips를 능숙하게 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/KenAra/items/3d60237ffe78f65285e9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)