javascript - 视觉 : Data fields changing as inputs are edited

标签 javascript vue.js

编辑以删除组件名称,但基本上是尝试使用 v-modal 来获取内部组件数据。 编辑以删除组件名称,但基本上尝试使用 v-modal 获取内部组件数据Editing to remove component names but basically trying to use v-modal to get component data inside 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 更新时,你可以像这样 POST 用户的城市:

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

关于javascript - 视觉 : Data fields changing as inputs are edited,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55232489/

相关文章:

javascript - Handlebars 自定义助手错误 : "options.fn is not a function"

javascript - 在 vue 上关闭模态时如何运行语句?

javascript - 未定义的属性 'push' - vue.js

webpack - 使用 Webpack 导入 Vue 组件

javascript - Easyautocomplete + Vue.js - 如何通过点击更新存储的变量?

javascript - 带有 Express 和 Jade 模板的 Node.js 不显示 leaflet.js map

javascript - 根据 Rails 中的第一个选择列表值更改第二个选择列表

css - 如何激活标签按钮?

javascript - 在JQuery中将图像转换为base64字符串

javascript - 在 HTTP 请求 AngularJS 之后将数据从工厂返回到 Controller