Currently, I am utilizing Vue v1.0.28 and vue-resource to interact with my API and fetch the resource data. In this setup, I have a parent component named Role, which includes a child component named InputOptions. The foreach loop within iterates over the roles.
The primary goal of all these components is to display a list of selectable items. The challenge lies in populating the selectedOptions array of the InputOptions component. How can I access this information from the parent component? Is this the correct approach?
To provide a clearer picture of my issue, I have shared a portion of my code below:
role.vue
<template>
<div class="option-blocks">
<input-options
:options="roles"
:selected-options="selected"
:label-key-name.once="'name'"
:on-update="onUpdate"
v-ref:input-options
></input-options>
</div>
</template>
...
<h3>InputOptions</h3>
<pre><code><template>
<ul class="option-blocks centered">
<li class="option-block" :class="{ active: isSelected(option) }" v-for="option in options" @click="toggleSelect(option)">
<label>{{ option[labelKeyName] }}</label>
</li>
</ul>
</template>
...
<h3>Props</h3>
<pre><code>export default {
props: {
options: {
required: true
},
labelKeyName: {
required: true
},
max: {},
min: {},
onUpdate: {
required: true
},
noneOptionLabel: {},
selectedOptions: {
type: Array
default: () => []
}
}
}
EDIT
I am now encountering a warning message in the console stating:
[Vue warn]: Data field "selectedOptions" is already defined as a prop. To provide default value for a prop, use the "default" prop option; if you want to pass prop values to an instantiation call, use the "propsData" option. (found in component: <default-input-options>)