A method in vue is called repeatedly?

problem: every time you change the value of an item item, all the values are translated in a loop.
but if I have dozens or hundreds of items, it"s a waste of resources.
what is needed now is to change the method that the value, of an item can only call this time, and other item
how can you solve this problem
if you add more li tags

            <li v-text="trans2text(items[0].value)"></li>
            <li  v-text="trans2text(items[1].value)"></li>
            <li v-text="trans2text(items[0].value)"></li>
            <li  v-text="trans2text(items[1].value)"></li>
            <li v-text="trans2text(items[0].value)"></li>
            <li  v-text="trans2text(items[1].value)"></li>

will call more useless methods

clipboard.png

Code: https://runjs.cn/code/597nybxz
demo address: https://runjs.cn/detail/597nybxz

Jan.14,2022

calculate the results when initialization and data changes


to be honest, after reading your code and demo, I was completely confused-- if you just want to order something and change a value, you can just do it directly in the change method, so why bind a method to v-text (to be honest, it's the first time I've seen the use of v-text), since you can pass in a key value (0) in the change method. Then you can directly modify the value of the items corresponding to the key value. On the other hand, the li node on the page is only responsible for rendering and displaying the result on OK.

personal research on VUE is not deep enough, but my understanding of vue is that it is a framework driven by data changes, so use vue to deal with page logic and try to complete it with changes in the data layer. So to tell you the truth, I am really blinded by this demand, or maybe the demand is not like this, but the reason why you have done it in this way.

if you can, I suggest you first describe the requirements of the complete point of your page. First of all, I really don't know how the problem came into being, but I suggest you do it in a different way. Your current way of implementation is too troublesome, and if something goes wrong, you can't find the cause. Instead of asking people aimlessly, you might as well find other ways for yourself


this has nothing to do with items. Even if it is a common dependent variable a , items changes will trigger all updates. Because it is a component-based update, please refer to https://github.com/vuejs/vue/.

.
item0</button>
    </div>
    
   
Menu