The vue data has changed and the interface has not changed.

                   <select   class="ui search dropdown" v-model="pid"
                                      v-on:click="changeCategory()"
                                      v-on:change="changeCategory()">

                                    <option
                                            v-for="vo in categorylist"
                                            v-bind:value="vo.goodscategory_id"
                                             :key="vo.goodscategory_id">
                                    {{vo.goodscategory_name}}
                                    </option>

                            </select>

Why the data has changed, but the interface has not changed the select drop-down

clipboard.png


    var app = new Vue({
        el: "-sharpapp",
        data: {
            categorylist:[],//
            pid:0,//id

            secondcategorylist:[],//
            cid:0,//

            autoparts_brandlist:[],//
            autopartsbrand:0,

            modeiswrite:0,//  0 1 2
        },
        computed:{



        },
        methods:{
            //
            changeCategory:function(){
                //


                axios.get("__MODULE__/Goods/bypidGetsecondid", {params: {pid:app.pid}
                }).then(function (response) {

                    app.secondcategorylist=[];//
                    app.secondcategorylist=  response.data;
                    app.cid=response.data[0].goodscategory_id;
                //    app.modeiswrite=response.data[0].goodscategory_modeiswrite;

                   // 
                    axios.get("__MODULE__/Goods/byCategoryidGetAutoPartsBrandId", {params: {categoryid:app.cid}
                    }).then(function (response1) {
                        app.autoparts_brandlist= response1.data;
                        app.autopartsbrand=response1.data[0].autopartsbrand_id;
                    });
                });


            },
         
        },
        created: function () {

 


        }
    })
Mar.06,2021

select to use v-model


casually try, click the button to change the data into another group, but the page option options will change, so you do not know where the problem is, maybe you triggered the event after the data did not change, maybe there is no trigger event. You can learn to test the code with console.log, clearly know which step the code you wrote performed, print different things in different locations, whether the code is executed according to your idea, and if not, find out what the problem is.


is categorylist defined in vue's data?


is your data an array? A complete screenshot of how to operate the code

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b2dd-2c266.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b2dd-2c266.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?