Vue JS help

[githubberblubber]

QueryPanel.vue------------------

  <div>
    <h1 ref="test">Query Panel</h1>
    <h2> {{ tracker }} </h2>
    **<div v-for="(refName, index) in queryLines" :key="index">
      <QueryLine :ref="refName"/>
      <button @click="deleteQueryLine(index)">Delete Parameter</button>
    </div>**

    <button @click="addQueryLine">Add Parameter</button>

    <button @click="logQueryLineRef">Get Data from QueryLines</button>
  </div>
</template>

<script>
import { ref } from "vue"
import QueryLine from "components/queryPanel/QueryLine.vue"

const queryLines = ref([])

export default {
  name: "QueryPanel",
  components: {
    QueryLine,
  },
  setup() {
    const idCounter = ref(0)
    const tracker = ref("")

    const addQueryLine = () => {
      const refName = `queryLine${idCounter.value++}`
      queryLines.value.push(refName)
    }

    const deleteQueryLine = (index) => {
      queryLines.value.splice(index, 1)
    }
    return {
      queryLines,
      addQueryLine,
      deleteQueryLine,
      getDataFromQueryLines,
      tracker,
    }
  },
  methods: {
    **logQueryLineRef() {
      console.log(this.$refs);
      queryLines.value.forEach((refName) => {
        const queryLineComponent = this.$refs[refName]
        const buttonLabel = queryLineComponent.buttonLabel;
        const selection = queryLineComponent.selection
        const validIntervals = queryLineComponent.validIntervals
        console.log("Data from", refName, ":", buttonLabel);
      })**
      
    },
  },
}
</script>

QueryLine.vue---------------------------

  <q-btn-dropdown class="parameter" color="primary" :label="reactiveLabel">
    <q-list>
      <q-item clickable v-ripple v-for="parameter in parameters" :key="parameter">
        <q-item-section @click="selectParameter(parameter)" :name="parameter">
          <q-item-label> {{ parameter }}</q-item-label>
        </q-item-section>
      </q-item>
    </q-list>
  </q-btn-dropdown>
  <q-input class="comparison"> 

  </q-input>
  <q-input class="value"> 

  </q-input>
</template>

<script>
import { defineComponent, ref, computed } from "vue";
import QueryLineValues from './QueryLineValues.json';

export default defineComponent({
  name: "QueryLine",
  setup() {
    **const buttonLabel = ref("Parameter");
    const selection = ref("");
    const validIntervals = ref([]);**

    const parameters = Object.keys(QueryLineValues);

    const selectParameter = (parameterName) => {
      buttonLabel.value = parameterName;
      selection.value = parameterName;
      validIntervals.value = QueryLineValues[parameterName];
    };

    const reactiveLabel = computed(() => buttonLabel.value);

    return {
      parameters,
      buttonLabel,
      selection,
      validIntervals,
      reactiveLabel,
      selectParameter,
    };
  },
});
</script>

<style>
.parameter, .comparison, .value {
  display: inline-block;
  padding: 20px;
}
</style>

What "console.log("Data from", refName, ":", buttonLabel);" outputs is an undefined value for buttonLabel --- which I'm confused by. Doing "console.log("Data from", refName, ":", buttonLabel.value);" throws an error (as buttonLabel is already undefined).

Even though there is a field for buttonLabel, I guess I can't access it?

[LinusBorg]

https://vuejs.org/api/sfc-script-setup.html#defineexpose

[githubberblubber]

Thank you so much! It had worked!