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

Javascript vue.js
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>

Previous: Webpack packing problem

Next: How to use the svm-rank toolkit under the windows platform?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
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-1b404e3-2c517.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-1b404e3-2c517.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?