Pass multiple values from a rangeslider to controller

I have a range slider that selects an image resolution, all I want to do is be able to send width and height to the controller.

As you can see from the code below, when I try to display {{ currentResolution.width }} on the page, or console log, it works just fine.

However, when I try to put this.currentResolution.width inside useForm() I get Undefined error and the page stops loading.

So something like this breaks down

form: useForm({
        width: this.currentResolution.width,
        height: this.currentResolution.height,
      })

HTML

<input type="range" class="form-range" :min="1" :max="resolution.length" :value="currentRes" @input="changeRes($event)">
 <span class="badge bg-primary">{{ currentResolution.width }} x {{ currentResolution.height }}</span>

Vue

export default defineComponent({
  components: {
    AppLayout,
    JetApplicationLogo
  },
  data() {
    return {
      resolution: [
          {id: 1, width: 896, height: 512},
          {id: 2, width: 512, height: 512},
          {id: 3, width: 512, height: 896},
      ],
      currentRes: 2,
      form: useForm({
        width: '',
        height: '',
        
      })
    }
  },
  computed: {
    currentResolution() {
      return this.resolution.find(r => r.id == this.currentRes)
    }
  },
  methods: {
    changeRes(e) {
      this.currentRes = e.target.value
    },
  }
});

LaryAI

3 years ago

Best Answer

Level 58

The issue is that useForm() is being called before currentResolution is set. One solution is to use a watcher to update the form values whenever currentResolution changes. Here's an example:

export default defineComponent({
  // ...
  watch: {
    currentResolution: {
      immediate: true,
      handler(resolution) {
        this.form.width = resolution.width
        this.form.height = resolution.height
      },
    },
  },
  // ...
})

This will set the initial form values to the current resolution, and update them whenever the resolution changes.

1 like

Please or to participate in this conversation.