How can I apply a built-in Vuetify component prop to the root element of an SFC from its parent, without adding my own prop?

1
votes

I have a single-file component, SitesCard, which is just a custom v-card:

<template>
  <v-card>
   // ...
  </v-card>
</template>

v-card is a Vuetify component which accepts a boolean loading prop. See the Vuetify card docs.

When I use this SitesCard component, I'd like to be able to be able to set the loading boolean prop directly on the SitesCard, which I've tried doing in these ways:

<SitesCard :loading="true" />
// OR
<SitesCard v-bind:loading="true">

I feel like this should be possible because <v-card> is the root element of SitesCard, so Vue/Vuetify should know to apply that prop to the <v-card>. But it doesn't seem to work that way. The loading indicator only appears if I set the <v-card>'s loading prop from within the SitesCard SFC.

I have a large number of custom SFC <v-card>s for which I'd like to control the loading state via their parent component.

Is there a way to have Vue apply built-in Vuetify props like loading to the root element of an SFC like this? Or do I have to manually pass in my own loading prop and then set the <v-card>'s loading from within the SFC?

2
vue.jsvuejs2vuetify.js
just curious, why not use a prop? – Goofballtech
@Goofballtech Just seemed like Vue should know to apply props to the root element, as opposed to having to declare and use a prop that only serves to set another prop. – David Gay
I dont know of i would like that if it did it automatically. Then in the case where you happen to have overlap in prop names or something it may apply things that you weren't thinking would be applied. Might just be me but i prefer to be very explicit. – Goofballtech

2 Answers

1
votes

If you really don't want to use a prop, you can use a store.js file or vuex as a state management tool and use a computed property instead.

Commit a mutation from the parent component (or from anywhere in your app for that matter) and the child component will react to the change of the computed property.

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    loading: false
  },
  mutations: {
    isLoading (state) {
      state.loading = !state.loading
    }
  }
})

anywhere in your app :

this.$store.commit('isLoading')

in your component :

computed: {
    loading () {
      return this.$store.state.loading
    }

Edit : another way to avoid using prop, you could write a method in your child component to update the loading variable and call the method from the parent component. However I can't see any benefit of using this over a prop.

0
votes

do it as a prop.

<SiteCard :cardLoading="showLoading">

data: {
  showLoading = false
}

<v-card :loading="cardLoading">

props: {
  cardLoading: {
    type: Boolean,
    default: false
  }
}

sorry for crappy code. on mobile. Hopefully this gives you the layout though.

When you toggle sjow loading prop on the parent it changes the prop. the prop then passes that value to the loading prop on the v-card component or any other using that var within the child.

edit* more direct answer to the question. I know of no way to make vue assume any props passed go to the root element. I changed the var name here for illustration but they could all be :loading="loading" and work fine so once the child is set it will be invisible to the parent you are doing it manually as a prop.

And yea. i did stop reading the title prematurely and went directly into the question. I didn't even see the "without using a prop" part of the title.