[Vuejs]-How can I change a v-for single item while looping in vuejs 3?

1👍

I don’t know how to achieve it the way you want.

But you could use a function/computed property to lowercase your fields.

Check Displaying Filtered/Sorted Results

You can also apply toLowerCase() to your array directly using map

fields.map((f) => f.toLowerCase())
const { createApp, ref } = Vue;

const App = { 
  setup() {
    const fields = ref(['My Field 1', 'My Field 2']);
    return { fields }
  }
  
}
const app = createApp(App)
app.mount('#app')
#app { line-height: 2; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
   <div v-for="keyField in fields.map((f) => f.toLowerCase())" :key='keyField'>
         keyField:{{ keyField }}
   </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Leave a comment