Tips on removing v-bind directives from HTML code in VueJS

Question

Tips on removing v-bind directives from HTML code in VueJS

So, I've been working with Vue code and HTML recently.

Take a look at this example:

Vue.component('area-selectors-box', {
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector>
    </div>
  `,
  props:['selects']
});

When I inspect the page source, I notice the v-bind:selects="selects" part, which I believe is not compliant with standards.

Other components have similar issues with object properties, like:

Vue.component('area-option', {
  template: `<option :area="area" :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});

This results in output like:

<option area="[object Object]" value="82">Europa</option>

which is not ideal.

Does anyone know how I can bind these properties without them displaying as attributes in the DOM?

javascript vue.js vuejs2

Answer 1

Answer №1

Typically, when v-bind comes across a binding name that doesn't match a property on the target, the value is transformed into a string and set as an attribute. Because <option> doesn't have a property called area, the object is assigned as a string attribute, which can be seen in the DOM.

To ensure it's always assigned as a property, you can utilize v-bind's .prop modifier:

<option :area.prop="area" ...>

Vue.component('area-selectors-box', {
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector>
    </div>
  `,
  props:['selects']
});

Vue.component('area-selector', {
  template: `<div>
    <select v-model="selection">
      <area-option
         v-for="option in select.options"
         :key="option.id"
         :area="option.area" />
    </select>
    <pre>{{selection}}</pre>
</div>`,
  props: ['select'],
  data() {
    return {
      selection: null,
    }
  }
})

Vue.component('area-option', {
  template: `<option :area.prop="area" :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});

new Vue({
  el: '#app',
  data: () => ({
    selects: [
      { id: 1, options: [
                { id: 10, area: { term_id: 100, name: 'Europe' } },
                { id: 11, area: { term_id: 101, name: 'Asia' } },
              ]
      },
      { id: 2, options: [
                { id: 20, area: { term_id: 200, name: 'North America' } },
                { id: 21, area: { term_id: 201, name: 'South America' } },
              ]
      },
    ]
  }),
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681e1d0d285a465e465958">[email protected]</a>"></script>

<div id="app">
  <area-selectors-box :selects="selects"></area-selectors-box>
</div>

Answer 2

Typically, when v-bind comes across a binding name that doesn't match a property on the target, the value is transformed into a string and set as an attribute. Because <option> doesn't have a property called area, the object is assigned as a string attribute, which can be seen in the DOM.

To ensure it's always assigned as a property, you can utilize v-bind's .prop modifier:

<option :area.prop="area" ...>

Vue.component('area-selectors-box', {
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector>
    </div>
  `,
  props:['selects']
});

Vue.component('area-selector', {
  template: `<div>
    <select v-model="selection">
      <area-option
         v-for="option in select.options"
         :key="option.id"
         :area="option.area" />
    </select>
    <pre>{{selection}}</pre>
</div>`,
  props: ['select'],
  data() {
    return {
      selection: null,
    }
  }
})

Vue.component('area-option', {
  template: `<option :area.prop="area" :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});

new Vue({
  el: '#app',
  data: () => ({
    selects: [
      { id: 1, options: [
                { id: 10, area: { term_id: 100, name: 'Europe' } },
                { id: 11, area: { term_id: 101, name: 'Asia' } },
              ]
      },
      { id: 2, options: [
                { id: 20, area: { term_id: 200, name: 'North America' } },
                { id: 21, area: { term_id: 201, name: 'South America' } },
              ]
      },
    ]
  }),
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681e1d0d285a465e465958">[email protected]</a>"></script>

<div id="app">
  <area-selectors-box :selects="selects"></area-selectors-box>
</div>

Answer 3

Answer №2

Remember to always pass props when calling the component, rather than within the component itself. This approach ensures clean and functional HTML:

Here is an example of in-page HTML:

<!-- Make sure to pass selects to the area-selectors-box component -->
<div is="area-selectors-box" :selects="selects"></div>

Here is the JavaScript:

Vue.component('area-selectors-box', { // Passing select to area-selector
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector> 
    </div>
  `,
  props:['selects']
});

Vue.component('area-selector', { // Passing area to area-option
  template: `
    <select @change="selected" >
      <option disabled selected value="">Select continent</option>
      <area-option v-for="area in select.areas" :area="area" :key="area.term_id"></area-option>
    </select>
  `,
  props:['select']
});

Vue.component('area-option', { // No props passed
  template: `<option :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});

Answer 4

Remember to always pass props when calling the component, rather than within the component itself. This approach ensures clean and functional HTML:

Here is an example of in-page HTML:

<!-- Make sure to pass selects to the area-selectors-box component -->
<div is="area-selectors-box" :selects="selects"></div>

Here is the JavaScript:

Vue.component('area-selectors-box', { // Passing select to area-selector
  template: `
    <div class="area-selectors-box">
      <area-selector v-for="(select, index) in selects" :select="select" :key="index"></area-selector> 
    </div>
  `,
  props:['selects']
});

Vue.component('area-selector', { // Passing area to area-option
  template: `
    <select @change="selected" >
      <option disabled selected value="">Select continent</option>
      <area-option v-for="area in select.areas" :area="area" :key="area.term_id"></area-option>
    </select>
  `,
  props:['select']
});

Vue.component('area-option', { // No props passed
  template: `<option :value="area.term_id">{{area.name}}<slot></slot></option>`
  ,props: ['area']
});

Tips on removing v-bind directives from HTML code in VueJS

Answer №1

Answer №2

Similar questions

Display a few HTML elements sourced from a different online platform

Updating multiple subdocuments with Mongoose

Exploring the World of Vue.js Object Imports

Encountering an error message stating "Unable to read property 'map' of undefined while attempting to create drag and drop cards

How can you loop through keys and values in a JSON object using JavaScript?

Issue encountered when attempting to make a global call to an asynchronous function: "The use of 'await' is restricted to async functions and the top level bodies of modules."

Spinning divs using JavaScript when the mouse hovers over them, and then returning them to their original position when the mouse moves

The problem arises when using `$state.go` as it does not properly transfer the value to `$stateParams`

Is it possible to combine several m3u8 files into a single m3u8 file?

If the condition is true, apply a class with ng-class when ng-click is triggered

Retrieve new data upon each screen entry

When using Vue computed, an error is thrown stating "Issue in rendering: 'InternalError: too much recursion'" if the same key is referenced in computed

Looking to transform a PHP output value

Revise the "Add to Cart" button (form) to make selecting a variant mandatory

Tips for modifying the audio session category in iOS using React Native

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

What is the best way to vertically align an InputLabel within a MUI Grid item?

Steps for closing the menu by clicking on the link

ESLint does not recognize the types from `@vuelidate/core` when importing them

Distinguishing div identifiers for jQuery displaying and concealing