javascript - Vue:编辑输入时更改的数据字段
问题描述
编辑以删除组件名称,但基本上尝试使用 v-modal 来获取内部组件数据。编辑以删除组件名称,但基本上尝试使用 v-modal 来获取内部组件数据编辑以删除组件名称,但基本上尝试使用 v-modal 来获取 wp.vue 内部的组件数据。(模板内的模态组件作为子组件)
<template>
<div class="cart-component">
<Modal
:modal-type="this.modalType"
:customer="this.customer"
>
<div class="shipping-info">
<span class="title">Shipping Address</span>
<span class="personal-details">{{this.customer.street_address + "," + this.customer.city + "," + this.customer.state}}</span>
<span
data-toggle="modal"
v-on:click="() => {this.modalType = 'EditShipping'}"
data-target="#"
class="edit">Edit
</span>
</div>
</template>
<script>
import Modal from './Modal.vue';
export default {
data() {
return {
cart: [],
cartItems: [],
customer: {},
dataLoaded: false,
modalType: null
}
},
mounted() {
this.getCartItems()
},
components: {
'Modal': Modal
},
methods: {
getCartItems: function() {
axios
.get('/api/new-account/cart')
.then(response => {
this.cart = response.data.cart;
this.cartItems = response.data.cart.items;
this.customer = response.data.customer;
this.dataLoaded = true;
});
}
</script>
S.vue(Shop.vue 的子级)
<template>
<div class="shipping-input-containers">
<div class="name">
<div class="first-name">
<input v-model="customer.name.split(` `)[0]" class="default-input"></input>
<span class="input-small">First Name</span>
</div>
<div class="last-name">
<input v-model="customer.name.split(` `)[1]" class="default-input"></input>
<span class="input-small">Last Name</span>
</div>
</div>
<div class="street-address">
<input v-model="customer.street_address" class="default-input"></input>
<span class="input-small">Street Address</span>
</div>
<div class="city">
<input v-model="customer.city" class="default-input"></input>
<span class="input-small">City</span>
</div>
<div class="state">
<input v-model="customer.state" class="default-input"></input>
<span class="input-small">State</span>
</div>
<div class="zip-code">
<input v-model="customer.zip" class="default-input"></input>
<span class="input-small">Zip Code</span>
</div>
</div>
<script>
export default {
props: {
customer: {type: Object}
},
methods: {
updateShippingAddress: function() {
axios.post('/api/account/update-address', {
street_address: this.customer.street_address || "",
city: this.customer.city || "",
country_code: this.customer.country_code || "",
state: this.customer.state || "",
zip: this.customer.zip || "",
apartment: this.customer.apartment || "",
phone_number: 221232123,
})
.then(response => {
if(response.data.success) {
this.$parent.getCartItems();
let msg = "Address updated!"
this.showFlashMsg(msg, true)
}
})
.catch(err => {
});
}
}
}
</script>
解决方案
由于您在 Shop 和 Modal 之间使用相同的模型,因此它的工作原理是这样的。首先,您需要在 Modal 中使用新名称,例如“customer.newCity”。然后当用户通过 updateShippingAddress 更新时,您可以像这样发布用户的城市:
//...
city: this.customer.newCiity ? this.customer.newCity : (this.customer.city || "")
//...
推荐阅读
- javascript - 在cordva ios应用程序中查看另一个网页
- c# - 如何在 Grid.mvc 中更改页面大小
- php - 尝试从 php mysql 中获取随机报价,使用颤振 http
- jekyll - 无法在 Jekyll 中检索自定义 Netlify CMS 集合
- matrix - Julia v1.1:创建矩阵数组
- mysql - 无法更新存储函数/触发器中的表,因为它已被在我的系统中调用此存储函数/触发器的语句使用
- c - 二进制文件的 objdump 输出中左侧的地址是什么?
- docker - Kibana 6.8.2 在 K8S 上部署(使用安全 xpack 功能)
- swift - 如何使用 Kitura Server 连接和授权 google auth iOS 客户端?
- jenkins - 在单个脚本管道中使用多个 JDK