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?

Question

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?

@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, Jul 08 '20 at 13:54
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, Jul 08 '20 at 22:58

Goofballtech · Answer 1 · 2020-07-07T21:23:54.730

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.

jcoleau · Accepted Answer · 2020-07-08T02:13:16.977

1

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.

edited Jul 08 '20 at 02:13

answered Jul 08 '20 at 01:42

jcoleau

1,112
7
20

Upvoted because this does fulfill the requirement of not declaring my own prop for the sole purpose of setting another prop, though in my case the goal was to write *less* code, hopefully by being able to pass props directly to the root element of the SFC from the parent. I guess maybe that just isn't possible with Vue right now. – David Gay Jul 08 '20 at 14:02
Indeed, unless you are using a store to have transversal data flow, the only possible flow is up or down the Vue instance’s component tree. – jcoleau Jul 08 '20 at 22:02

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?

2 Answers2