Vue - conditionally pass down props Vue - conditionally pass down props vue.js vue.js

Vue - conditionally pass down props


You can use v-bind and pass it and object containing all your props. and conditionally add your id prop like this.

<survey-wrapper v-bind="{ inputJson, ...(id ? { id } : {}) }"></survey-wrapper> 


You can do it using v-bind and dynamically creating the list of props with a method.

Here is an example:

<template>  <div id="app">    <Component v-bind="propsToPass()"/>  </div></template><script>export default {  name: "App",  components: {    Component  },  data() {    return {      passId: true    }  },  methods: {    propsToPass() {      const result = {};      if (this.passId) {        result.id = 1;      }      return result    }  }};</script>

In the above example, the prop id will only be passed if passId is true.