title: Vue - Render components depending on state of parent data
body: <p>I'm trying to render components depending on the state of an array in the parent (App.vue). I'm not sure at all that this is the correct approach for this use case (new to Vue and not experienced programmer) so I will gladly take advice if you think this is not the right way to think about this.</p>
  
  <p>I'm trying to build a troubleshooter that consists of a bunch of questions. Each question is a component with data that look something like this:</p>
  
  <pre><code>data: function() {
      return {
          id: 2,
          question: "Has it worked before?",
          answer: undefined,
          requires: [
              {
                  id: 1,
                  answer: "Yes"
              }
          ]
      }
  }
  </code></pre>
  
  <p>This question is suppose to be displayed if the answer to question 1 was yes. </p>
  
  <p>My problem is I'm not sure on how to render my components conditionally. Current approach is to send an event from the component when it was answered, and to listen to that event in the parent. When the event triggers, the parent updates an array that holds the "state" of all answered questions. Now I need to check this array from each component to see if there are questions there that have been answered and if the right conditions are met, show the question. </p>
  
  <p>My question is: How can I check for data in the parent and show/hide my component depending on it? And also - is this a good idea or should I do something different?</p>
  
  <p>Here is some more code for reference:</p>
  
  <p>App.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;div class="c-troubleshooter"&gt;
              &lt;one @changeAnswer="updateActiveQuestions"/&gt;
              &lt;two @changeAnswer="updateActiveQuestions"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import one from './components/one.vue'
  import two from './components/two.vue'
  
  export default {
      name: 'app',
      components: {
          one,
          two
      },
      data: function() {
          return {
              activeQuestions: []
          }
      },
      methods: {
          updateActiveQuestions(event) {
              let index = this.activeQuestions.findIndex( ({ id }) =&gt; id === event.id );
              if ( index === -1 ) {
                  this.activeQuestions.push(event);
              } else {
                  this.activeQuestions[index] = event;
              }
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>two.vue</p>
  
  <pre><code>&lt;template&gt;
      &lt;div v-if="show"&gt;
          &lt;h3&gt;{{ question }}&lt;/h3&gt;
          &lt;div class="c-troubleshooter__section"&gt; 
              &lt;div class="c-troubleshooter__input"&gt;
                  &lt;input type="radio" id="question-2-a" name="question-2" value="ja" v-model="answer"&gt;
                  &lt;label for="question-2-a"&gt;Ja&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="c-troubleshooter__input"&gt;
                  &lt;input type="radio" id="question-2-b" name="question-2" value="nej" v-model="answer"&gt;
                  &lt;label for="question-2-b"&gt;Nej&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data: function() {
          return {
              id: 2,
              question: "Bla bla bla?",
              answer: undefined,
              requires: [
                  {
                      id: 1,
                      answer: "Ja"
                  }
              ]
          }
      },
      computed: {
          show: function() {
              // Check in parent to see if requirements are there, if so return true
              return true;
          }
      },
      watch: {
          answer: function() {
              this.$emit('changeAnswer', {
                  id: this.id,
                  question: this.question,
                  answer: this.answer
              })
          }
      }
  }
  &lt;/script&gt;
  </code></pre>