5

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!

Claire
  • 773
  • 1
  • 8
  • 19

2 Answers2

2

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>
Sunday Ømwami
  • 41
  • 4
1

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. ><

Claire
  • 773
  • 1
  • 8
  • 19