javascript - Property "responseType" was accessed during render but is not defined on instance

Question

I am creating a small app for review question generation, and what type of required response to said question via a select list. I cannot access my list however, and I am confused as to why. I have tried a number of things for the past few hours to no avail. I would really like some advice, or even a nice little lesson in how Vuejs 3 seems to operate in this instance as I have only worked with it for 3 days. I know there is most likely a number of other things in this snippet that could be improved upon, but I am at a hard stop currently, and would like responses that deal with this problem please.

JS:

var questionct = 1;

const App = {
    data() {
        return {
            questionct: 0,
            configname: '',
            questions: [],
            test: 'hello!',
            responseType: [
                { value: 'text', name:'Comment' },
                { value: 'number', name:'1-5 Rating' },
                { value: 'both', name: 'Both' }
            ]
        }
    },
    methods: {
        add: function (event) {
            this.questions.push({ id: this.questionct, title: 'Review Question '+this.questionct+':', rquestion: '',response: '' });
            this.questionct++;
            
        },
        save: function (event) {
            
            var postdata = { app: 'employee', task: 'newreviewconfig', data: JSON.stringify(this.questions) };
            
            console.log(JSON.stringify(this.questions));
        },
        remove: function (event){
            this.questions.pop();
            this.questionct--;
            //console.log('remove:'+ct);
        }
    }          
};
function saveConfigCB(json){
    var djson = json_decode_safe(json);
    console.log(djson);
    console.log('save config callback');
}

const bs = {
    props: ['question','response'],
    template: `<div class="rev-quest">
        <h5><strong>{{ question.title }}</strong></h5>
        <input v-model="question.rquestion" placeholder="Type here...." size="80" autocomplete="off">&nbsp
        <label for="rtype">&nbsp Response Type: </label>
        <select id="rtype" >
            <option v-for="(response,rindex) in responseType" :value="response.value" :key="rindex">
                {{ response.name }}
            </option>
        </select>
        </div>`
};
const app = Vue.createApp(App);

app.component('rev-quest', bs);
app.mount('#review-questions');

html:

<div id="review-questions">
  <form method=post action="index.php?app=employee&task=newreviewconfig" id="newreviewconfig" role="form" >
      <br><br><br>
      <rev-quest
          v-for="question in questions" 
          v-bind:key="question.id" 
          v-bind:question="question">
      </rev-quest>
      <br>
      <button type="button" v-on:click="add" class="btn btn-primary">Add Question</button>
      <button type="button" v-on:click="remove" class="btn btn-danger" style="margin-left: 50px">Remove Question</button>
      <button type="button" v-on:click="save" class="btn btn-success pull-right">Create Review Config</button>
</div>
</form>

question from:https://stackoverflow.com/questions/65836564/property-responsetype-was-accessed-during-render-but-is-not-defined-on-instanc

Answer 1

I've figured out the solution. It appears as if I was reading the error message in the title of the post and expecting it to be somewhere it was not. I expected, since respsonseType was inside of my const App variable, that it was having the issue here. I realize now that the error message is a little counterintuitive. (I think) The variable responseType was being read because the variable app is created into a Vue app. This contains responseType in the parent, but not in the child template, variable bs. When I added it to return in the data() component for bs, it was read by the component properly. I can only assume I will run into future problems separating these templates? Either way it is a good lesson learned about how Vue passes data and the relationships of components to their own data.