The vue array dynamically adds values, but the values have been added, but cannot be rendered

The dynamic addition value of the

vue array name, name value has been added, but it cannot be rendered. Whether it is the Synchronize asynchronous problem, or reload the data, how do I write

            <div>
                <legend></legend>
                <div class="layui-inline" v-for="p in priceList">
                    <label class="layui-form-label">{{p.name}}</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        :
                        <input type="text" name="model" class="layui-input" v-model="p.std">
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        :
                        <input type="text" name="model" class="layui-input" v-model="p.max">
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        :
                        <input type="text" name="model" class="layui-input" v-model="p.min">
                    </div>
                </div>
            </div>
            
            <script>
                    var terminalForm = new Vue({
            el: "-sharpterminalForm",
            data: {
                t: data ? data : {},
                priceList: [],
                suee: false
            },
            create: function () {
                var that = this
                that.priceList = that.t.recipes
                $.get("api/product/list_ingredient").then(function (res) {
                    var recipes = that.priceList;
                    var priceName = res.data;
                    for (var i in recipes) {
                        for (var j in priceName) {
                            if (recipes[i].ingredientId == priceName[j].id) {
                                recipes[i].name = priceName[j].name;
                            }
                        }
                    }
                })

                console.log(that.priceList)
                that.suee = true
            },
        });
            
            </script>
Mar.10,2021

due to the limitation of JavaScript, Vue cannot detect the following changing arrays:
when you set an item directly using the index, for example: vm.items [indexOfItem] = newValue
when you modify the length of the array, for example: vm.items.length = newLength

use these functions to operate
push ()
pop ()
shift ()
unshift ()
splice ()
sort ()
reverse ()
or reassign list list = newList
or list.splice (0, list.length-1) and then push again

take a look at the vue official website list rendering bar


https://cn.vuejs.org/v2/api/-sharp.

set dynamic property values with Vue.set (target, key, value)


Object.assign ({},)

Menu