PJCHENder 未整理筆記

[Vue] Vue 小技巧筆記(Vue Tips)

2018-02-22

[VUE] Vue 小技巧筆記(Vue Tips)

@(Vue)

v-model 替代

使用 contenteditable="true" 的時候不支援 v-model 這時候可以自己使用下面的方式綁定:

1
<div class="event" contenteditable="true" v-text="activity.name" @input="activity.name = $event.target.innerText">{{ activity.name }}</div>

Vue 2.0 入門系列(11)雙向綁定其他元素以及自定義表單控件 @ segmentFault

AJAX 處理

當透過 AJAX 取得資料後,把該資料傳到 child component 時,child component 可能不會觸發更新,這時候可以搭配 watch 使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- Parent Component: MemberEdit -->
<template>
<div>
<h1 class="page-title mb-5 text-center">編輯會員</h1>
<!-- STEP 2: 將資料透過 prop 傳到 child component -->
<member-form
:memberData="memberData"
@submit="handleSubmit"
@cancel="handleCancel">
</member-form>
</div>
</template>

<script>
// STEP 1: 透過 AJAX 取得資料 memberData
getMemberDetailAPI().then((data) => {
this.memberData = { ...data };
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Child Component: MemberForm -->
<script>
export default {
name: 'MemberForm',
props: ['memberData'],
data() {
return {
form: {...}
};
},
// 在 watch 的地方,當 AJAX 取得新資料後更新 Child Component 的資料
watch: {
memberData(newData) {
this.form = {
...newData,
};
}
},
}
</script>

掃描二維條碼,分享此文章