Question

我正在做一个使用laravel和vue js的网站。我得到的错误是这个

[Vue警告]：避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“ selected_parent”

还有这个

[Vue警告]：v-on处理程序中的错误（承诺/异步）：“错误：请求失败，状态码为404”

我看不到哪里出了问题。

这是我的product.blade.php

@extends('layouts.public')
@section('content')
    <div class="content_wrapper">
        @foreach($single_product as $product)
            <div class="row single_product_wrapper">
                <div class="col-lg-8 col-md-12-col-sm-12 product_details">
                    @foreach($parent_product as $parent)
                        <h1>
                            {{ $parent->title }}
                        </h1>

                        <table style="width: 100%; height: 95px;" border="2" cellspacing="5" cellpadding="5">
                            <tbody>
                                <tr style="text-align: center;">
                                    <td>
                                        <strong>Code</strong>
                                    </td>

                                    <td>
                                        <strong>Description</strong>
                                    </td>

                                    <td>
                                        <strong>Price</strong>
                                    </td>
                                </tr>

                                <tr style="text-align: center;">
                                    <td>
                                        {{ $parent->code }}
                                    </td>

                                    <td>
                                        {{ $parent->description }}
                                    </td>

                                    <td>
                                        {{ $parent->price }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    @endforeach

                    <!-- BEGIN ADD TO CART FORM -->
                    <div id="app">
                        @foreach($parent_product as $parent)
                            <code-selection :products="{{ $parent_product }}" :children="{{ $parent->parent }}"></code-selection>
                        @endforeach
                    </div>
                    <!-- END ADD TO CART FORM -->
                </div>
            </div>
        @endforeach
    </div>
@stop

这是我的主意

<template>
    <div>
        <form @submit.prevent="submit">
            <div class="row">
                <div class="col-lg-12 code_select">
                    <select name="code" id="code" class="form-control mb-2 mt-10" v-model="selected_parent" required>
                        <option :value="selected_parent">Please select your code</option>
                        <option v-for="product in products" :value="product.id">
                            {{ product.code }}
                        </option>

                        <option v-for="child in children" :value="child.id">
                            {{ child.code }}
                        </option>
                    </select>
                </div>
            </div>

            <input type="submit" class="btn btn-dark btn-lg btn-block" value="Add To Cart">
        </form>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        props: [
            'products',
            'children',
            'selected_parent'
        ],

        mounted() {
            console.log('Component mounted.')
        },

        methods: {
            submit(){
                var formData = new FormData();

                formData.append('code', this.selected_parent);

                return axios.post('/add-to-cart/'+this.selected_parent, formData)
                            .then(
                                function(response)
                                {
                                     console.log(response.data.redirect);
                                     window.location = response.data.redirect;
                                }
                            );
            },
        },
    }
</script>

所以我想发生的是，当用户选择一个代码并按下Add To Cart按钮时，他们将被带到购物车页面，但是现在当我选择代码并按一下按钮时，这没有发生，什么也没发生，我得到了我在控制台中所说的错误。

如果您需要了解其他信息，请告诉我

Answer 1

答案很简单，您应该通过将值分配给一些局部组件变量（可以是数据属性，使用getter，setter或watcher计算）来破坏直接prop突变。

这是使用观察者的简单解决方案。

<template>
  <input
    v-model="input"
    @input="updateInput" />
</template>

<script>
  export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      input: '',
    };
  },
  watch: {
    value: {
      handler(after) {
        this.input = after;
      },
      immediate: true,
    },
  },
  methods: {
    updateInput() {
      this.$emit('input', this.input);
    },
  },
};
</script>

这就是我用来创建任何数据输入组件的工具，它工作得很好。将监视父v模型发送的所有新变量并将其分配给输入变量，一旦接收到输入，便捕获该动作并将输入发送给父，表明数据是从表单元素输入的。

第二部分，当您从重定向接收到新的URL时，只需像这样替换位置href：

return axios.post('/add-to-cart/'+this.selected_parent, formData)
  .then((response) => {
    window.location.href = response.data.redirect;
  })
  .catch((error) => {
    console.log(error);
  })
);

Vue JS选择框给出了一些错误

1 个答案: