Question

进行编辑以删除组件名称，但基本上是尝试使用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>

Answer 1

由于您在Shop和Modal之间使用了相同的模型，因此它的工作原理是这样的。首先，您需要在Modal中使用新名称，例如“ customer.newCity”。然后，当用户通过updateShippingAddress更新时，您可以像这样发布用户的城市信息：

//...
city: this.customer.newCiity ? this.customer.newCity : (this.customer.city || "")
//...

Vue：数据字段随着输入的编辑而改变

1 个答案: