CODEWITHSUNDEEP
nuxt.jsvuetify.jsv-selectno-data
Claire
Claire

Reputation: 863

Vuetify: editing no-data-text prop or no-data slot for v-select doesn't seem to have any effect

I'm using Vuetify in a Nuxt project. By using the slot no-data in a v-data-table I was able to modify the "No data available" message. It's also working if I use the prop no-data-text.

<v-data-table>
  <template slot="no-data">
    My no data message
  </template>
</v-data-table>

OR

<v-data-table no-data-text="My no data message"></v-data-table>

As the documentation of the v-select shows the same prop and slot, I tried to update the message as well but I still have "No data available" showing instead of my own message. Am I doing something wrong?

The only other subject I found which might be related is https://github.com/vuetifyjs/vuetify/issues/2081

Thanks in advance for any help!

Upvotes: 7

Views: 9711

Answers (3)

Denis Francia Karell
Denis Francia Karell

Reputation: 783

Based on Sunday Ømwami code and this answer, you can use the no-data slot.

<v-data-table ...>   
</v-data-table>

<template #no-data>
  {{ no_results_text }}
</template>

<script>
export default {
  data(){
    return {
      no_results_text: "test message"
    }
  }, 
  methods: {
   updateText(){
     this.no_results_text="other message"
   }
  }
}
</script>

Also, if you need to escape html content on no_results_text variable, you can use instead:

<template #no-data>
  <span v-html="no_results_text"></span>
</template>

Upvotes: 0

Sunday &#216;mwami
Sunday &#216;mwami

Reputation: 71

You can use the v-bind syntax if the no data text will change based on some condition

 <v-data-table :no-data-text="no_results_text">   
 </v-data-table>

<script>
export default {
  data:function(){
    return {
      no_results_text: "test message"
    }
  }, 
  methods: {
   updateText(){
     this.no_results_text="other message"
   }
  }
}
</script>

Upvotes: 5

Claire
Claire

Reputation: 863

My bad, might have some issue with cache or something else. I can see my message. Well this question might still help the one who are wondering how to update the no-data message or to translate it, as I looked for it a while. ><

Upvotes: 1

Related Questions