Vue js 选择框给出几个错误

Question

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

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，请使用基于道具值的数据或计算属性。道具被变异："selected_parent">

而这个

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

我

看不出我哪里出错了。

这是我的产品刀片.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

这是我的 vue

<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 或观察者计算(来打破直接 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-model 发送的任何新变量都将被监视并分配给输入变量，一旦收到输入，就会捕获该操作并向父级发出输入，建议数据是从表单元素输入的。

对于第二部分，当您从重定向收到新 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);
  })
);