Issues encountered with vue element checkbox functionality while in edit mode

I am currently utilizing checkboxes provided by Vue Element. You can take a look at them here: . However, I am encountering an issue where users are unable to select checkboxes in edit mode. Any assistance would be greatly appreciated.

<el-checkbox-group v-model="form.activity_type" size="small">
      <el-checkbox-button
        v-for="(all_type,index) in all_activity"
        :key="index"
        :label="all_type.id"
      >{{all_type.activity_type_name}}</el-checkbox-button>
    </el-checkbox-group>
vue.jsvue-component

Answer №1

<el-checkbox-group v-model="form.activity_type" size="small">
    <el-checkbox-button
        v-for="(all_items,index) in all_options"
        :key="index"
        :label="all_items.id">
        {{all_items.option_name}}
    </el-checkbox-button>
</el-checkbox-group>

Greetings! To display checkboxes in edit mode, you can follow these steps:
    data() {
        return {
            form: {
                activity_type: []
            }
        };
    }

import {getData} from "@/api/data";

2) Inside a method function:
    getData(id).then(response => {
        this.form = response.res;
    });
3) Make sure to pass the data in this format from your controller:
    $selectedData = [];
    $selectedData['activity_type'] = array(1,3);//ids of options you want as checked
    return response()->json(["res" => $selectedData]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to route a localpath to a different page including parameters in Nuxt Js?

Hello, I am facing an issue where I need to pass parameters in the URL to another page in NuxtJs props: { idPending: { type: Number, required: true } }, methods: { fetchpage() { const orderId = this.idPending; this.$rou ...

javascriptvue.jsnuxt.js

Is it possible to generate unique identifiers for v-for keys using vue-uuid?

I'm attempting to utilize a random string (UUID v4) using vue-uuid for existing items and future additions to the list in my to-do list style application. However, I'm uncertain about the correct syntax to use. After installation, I included it ...

javascriptvue.js

Leveraging various routes to access data with a shared VueJS 3 component

Could you please review this code snippet: It displays two routes that utilize the same component to fetch content from an API. Main.js const router = createRouter({ history: createWebHistory(), routes: [ { path: "/route1& ...

javascriptvue.jsvue-routervuejs3

Issue with vue-router not displaying template for nested routes

My route configuration looks like this: const routes = [{ path: '/', component: Home, children: [ { path: "/health", children: [ { path: 'overview', ...

javascriptvue.jsvuejs2vue-componentvue-router

Vue js version 2.5.16 will automatically detect an available port

Every time I run the npm run dev command in Vue.js, a new port is automatically selected for the development build. It seems to ignore the port specified in the config/index.js file. port: 8080, // can be overwritten by process.env.PORT, if port is in u ...

javascriptvue.jsvuejs2

How can I retrieve the value from the input field using vue.js?

I am currently utilizing the vue-js-toggle-button library. While I understand that I can access the value inside the name using $refs, the issue arises as I have 3 toggle buttons and cannot set a Ref because I want to retrieve the name value dynamically i ...

javascriptvue.js

Discover the magic of triggering events that dynamically alter CSS styles

I am trying to implement an eventBus in the App.vue component that allows me to change a modal's CSS based on a payload object. For example, if I pass { type: 'success' }, the border of the modal should turn green, and if I pass { type: &apo ...

javascriptvue.js

Incorporate a new class into the slot's scope

I'm developing a custom table feature that allows users to customize <td> elements using a slot. Here's the current setup: <tbody> <tr v-for="(item, key) in items"> <slot :item=item"> <td v-for="(header, he ...

javascriptvue.jsvuejs2

Vue.js is unable to render the template using Object

During this demonstration at https://jsfiddle.net/ccforward/fa35a2cc/, I encountered an issue where the template could not render and the data in resultWrong remained empty with a value of {} At https://jsfiddle.net/ccforward/zoo6xzc ...

javascriptvue.js

Transforming API Response into a structured format to showcase a well-organized list

When I make an API call for a list of properties, the data comes back unorganized. Here is how the data from the API looks when stored in vuex: posts:[ { id: 1; title: "Place", acf: { address: { state: "Arkansas", ...

javascriptjsonvue.jssortingvuejs2

Acquiring information from a different Vue.js component

I am faced with a puzzle involving 2 components, A and B. Component A: import B from '../components/B.vue'; export default { components: { B }, methods: { test: function() { console.log(B.data().settin ...

javascriptvue.js

Implementing dynamic component swapping in Vue 3 using components from another component

I currently have a display component called app-display, which contains a dynamic component inside (by default, it is set to app-empty): app.component('appDisplay', { template: `<component :is="currentComponent"></c ...

javascriptvue.jspropertiescomponentsvuejs3

The issue of array sorting, specifically the function(a, b) {return b.value - a.value), is causing some

I am struggling to retrieve data from firebase and sort them according to the field 'overallScore' in descending order. Despite following suggestions like using array.sort(function(a, b) {return b.value - a.value), I have not been successful in s ...

javascriptfirebasevue.js

Navigating through a nested array within a JSON object using Vue.js - a guide

I have a JSON data array that includes outer and inner subarrays. My goal is to loop through both levels and create a table. Below you'll find a snippet of the sample array: { class:'I', subDdiv:[ { ...

javascriptloopsvue.jsvuejs2element-ui

Mistakenly appearing at the top of the window instead of the bottom of the window

Utilizing Vue.js to fetch resources from a Laravel API periodically and paginate(), after retrieving the initial 10 instances, I aim to get the next 10. Here's how my method looks: scroll () { window.onscroll = () => { let bottomOf ...

javascriptvue.js

I'm facing a challenge with displaying data on a dynamically created table using VueJS

I'm having an issue with dynamically generating a table using VueJS. The problem arises when creating the <th> elements. In order to set them up, I have a Vue component that is called by the addRow function. This component uses templates with v ...

javascriptvue.jsvuejs2javascript-objectsvue-component

What is the best way to keep vue-meta up to date when the route or URL

The issue I am facing is that the meta data on my website does not update when the route changes. Even though the route has a watch function that updates the view correctly, the metaInfo() method from vue-meta fails to keep up with the changes. Below is an ...

javascriptvue.jsvuejs2vue-routervue-meta

Parent-Child Communication in VueJS 2.0: How to effectively pass data from the parent component

Does anyone know a straightforward solution to this issue? I've been struggling to find one. Within my HTML file, there's a button that looks like this: <button @click="showModal">Show Modal</button> By clicking on the button, it t ...

javascriptvue.jsvuejs2vue-component

The chosen option in the q-select is extending beyond the boundaries of the input field

Here's the code snippet I used for the q-select element: <q-select square outlined fill-input standout="bg-grey-3 text-white" v-model="unit_selection" :options="units&qu ...

javascriptvue.jsvuejs3quasar-frameworkquasar

Displayed unfamiliar Obj characters on Google Chrome

Hey there, I'm new to Vue JS and Vuetify and could really use some help! I've been trying to display some HTML content from my data using v-html in Vue JS, but for some reason, strange OBJ symbols keep showing up. Here is a screenshot of what I ...

javascriptvue.js