tag name property undefined using Vue but accessible within the browser

vuex
vue js
vue lifecycle hooks
vue global variable
vue.prototype not working
vue router
vue.prototype undefined
access vue instance from javascript

Currently i have a selector that returns undefined when using Vue for the {{ lens.price }}. But when i use a = lens[1].getAttribute('price') within the browser console i get the correct returned value of "0".

Why is Vue making this returned data undefined? The property works fine within the browser on all options that are returned from the for loop.

Do i need to pass both properties to a single value tag name?

HTML/LIQUID:

    <div>
      <label for="lens"></label>
      <select id="lens" name="line_items[lens]" @change="handleChange('lens', $event); secondChange($event);"
        class="mt-3 option-selector text-sm lg:text-base uppercase block appearance-none w-full bg-white text-gray-900 py-3 px-4 pr-8 rounded-sm leading-tight focus:outline-none focus:border-black font-bold">
        <option>Choose a lens</option>
        {% for lens in collections.lenses.products %}
        <option price="{{ lens.price }}" value="{{ lens.variants[0].id }}">{{ lens.title }} |
          {{ lens.price | plus: product.price | money_without_trailing_zeros}}</option>
        {% endfor %}
      </select>
    </div>

BREAKDOWN OF VUE: (NOT COMPLETE CODE)

data: function () {
    return {
        buttonText: false,
        slideOut: false,
        disableAddToCart: true,
        chosenLens: '',
        chosenFilter: '',
        lensPrice: ''
    }

handleChange(type, e) {
        if (type === 'lens') {
            if (e.target.value) {
                this.chosenLens = e.target.value;
            }
            else {
                this.chosenLens = ''
            }
        }
        if (type === 'filter') {
            this.chosenFilter = e.target.value || ''
        }
        this.disableAddToCart = !(this.chosenLens && this.chosenFilter);
    },
    secondChange(e) {
        this.lensPrice = `${e.target.price}`;
    },

I have tried Javascript only: (undefined)

<div>
    <label for="lens"></label>
    <select id="lens" onchange="myFunction()" name="line_items[lens]" @change="handleChange('lens', $event);"
      class="mt-3 option-selector text-sm lg:text-base uppercase block appearance-none w-full bg-white text-gray-900 py-3 px-4 pr-8 rounded-sm leading-tight focus:outline-none focus:border-black font-bold">
    <option>Choose a lens</option>
    {% for lens in collections.lenses.products %}
    <option price="{{ lens.price }}" value="{{ lens.variants[0].id }}">{{ lens.title }} |
      {{ lens.price | plus: product.price | money_without_trailing_zeros}}</option>
    {% endfor %}
  </select>
</div >
    <h1 id="demo"></h1>
    <script>
        function myFunction() {
  var x = document.getElementById("lens").price;
        document.getElementById("demo").innerHTML = "You selected: " + x;
      }
</script>

Only attribute name 'value': (working)

    <div>
  <label for="lens"></label>
  <select id="lens" onchange="xIs()" name="line_items[lens]" @change="handleChange('lens', $event);"
    class="mt-3 option-selector text-sm lg:text-base uppercase block appearance-none w-full bg-white text-gray-900 py-3 px-4 pr-8 rounded-sm leading-tight focus:outline-none focus:border-black font-bold">
    <option>Choose a lens</option>
    {% for lens in collections.lenses.products %}
    <option value="{{ lens.price }}">{{ lens.title }} |
      {{ lens.price | plus: product.price | money_without_trailing_zeros}}</option>
    {% endfor %}
  </select>
</div>
<h1 id="demo"></h1>
<script>
 const xIs = () => {
  var x = document.getElementById("lens").value;
   document.getElementById("demo").innerHTML = `x is: ${x}`;
}

</script>

Let's start here:

e.target.value

e is the browser event object.

e.target will be the <select> element.

A <select> element has a built-in property called value that reflects the currently selected value. This value is taken from the value attribute of the currently selected <option>.

So what happens is:

  1. User clicks on an <option>.
  2. The browser sets the value attribute of the <select> to be equal to the value attribute of the selected <option>.
  3. The browser fires the change event for the <select>.

The value attribute has special significance in HTML. Other attributes of the <option>, such as price, do not.

Here's an example that doesn't use Vue at all that exhibits this same behaviour:

document.getElementById('lens').addEventListener('change', function (ev) {
  const target = ev.target
  console.log(target.tagName, target.value, target.price)
})
<select id="lens">
  <option value="A" price="1">First</option>
  <option value="B" price="2">Second</option>
</select>

app.message returns undefined in console using Vue in Laravel , Well, as far as I can see from the live link is that its not the problem you anticipated at all. app returns an HTML element collection and not a Vue object. This does not happen in IE 6, IE7 or IE8. This does not happen in the IE 9 browser. This only happens when using the WebBrowser control on a form from within Excel (VBA) on a machine with IE9. Oddly, this does NOT happen when using the webbrowser control in a .NET application & IE9. It seems to be restricted to using the control from within Excel.

I know this might not be a proper fix but i was able to just do a hack for now using split(): The problem is Vue seems to want data to come from Value and any other attribute name it didn't work with.

<option value="{{ filter.variants[0].id }}-{{ filter.price }}"><span>{{ filter.title }} +
  </span><span>{{ filter.price | money_without_trailing_zeros }}</span></option>

priceMethod(type, e) {
        if(type === 'lens')
        if (e.target.value) {
            let a = e.target.value
            a = a.split("-")[1]
            a = a.replace('00', '')
            console.log(a)
            a = parseInt(a)
            this.lensPrice = a;
        } 
        if (type === 'filter') {
            let b = e.target.value
                b = b.split("-")[1]
                b = b.replace('00', '')
                b = parseInt(b)
                console.log(b)
            this.filterPrice = b || ''
        }

Variable not accessible in IE11 � Issue #3410 � vuejs/vue � GitHub, Hi, I have a Vue app setup which is searching for domain names for purchase. is not accessible in IE11, but it is in every other major browser. getting was: " Unable to get property 'term' of undefined or null reference" @mewejo the issue is not with Vue.js but IE11, I believe, attempting to remove tags� DWQA Questions › Category: Program › TypeError: Cannot read property'0'of undefined when Vue accesses local JSON 0 Vote Up Vote Down xiuxiuboom asked 1 year ago Although TypeError: Cannot read property’0’of undefined,However, the data and data are normally displayed, just want to understand what causes the error, trouble you gods.

In the end i was successful with the same technique as the below.

<select id="app"  @change="deleteItem()">
      <option type="button" data-price="$149">
          $149
      </option>
      <option type="button" data-price="$409">
           $409
      </option>
    </select>

new Vue({
  el: '#app',
  methods:{
    deleteItem: function(){
        var carList = document.getElementById("app");
        var selCar = carList.options[carList.selectedIndex].dataset.price;
        alert(selCar)
    }
  },
})

The output is an alert of the data attribute of $149 on change or $409 on change. @click also works.

Common mistakes to avoid while working with Vue.js, Unfortunately, I encountered a lot of issues with Vue.js at the very beginning. Some of these issues may seem obvious, but I figured that sharing my In the code snippet above, the Vue instance has a property called item (defined in data) . With SFCs, the component code is the script tag of a .vue file. Notice that the key names within this object match the names that we specify within the ref attribute, and the values are the DOM elements. In this case, we can see that the key is myButton and that the value is a native button element which has nothing to do with Vue.js. Therefore we can simply access the DOM element by accessing the name of

Accessing properties globally in Vue.js with prototypes, Accessing Properties Globally With Vue.js Prototypes you will see the saved name (LogRocket) displayed in your browser console. Vue.js allows you to add not only properties, but also methods as prototypes. For example my template might have {{ number }}, currently im getting number undefined. It is passed to the component using the following piece of code. <testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent> The component needs to take the props field as shown above. It starts with : and the name of the props. Here, we are passing the element tag, color, fontsize, and the id of the element.

Yaser Adel Mehraban (Yashints), Then we in the second script tag, we create a new instance of Vue and So you should see a page with Hello World! when you open this file in a browser. Vue will automatically make every property of data accessible like a high You can get their values in the template, by just using the property name. HTML Tag Reference HTML Browser Support HTML Event Reference HTML Color isId item() length name The undefined property indicates that a variable has not been

Focus management with Vue refs, We'll look at using Vue refs to handle this — an advanced feature that from the DOM, but we don't move the user's focus anywhere, so in effect it just disappears. HTML elements directly through native browser APIs (like Document. To use a ref in a component, you add a ref attribute to the element� String with the current environment name if using an environment snippet, or the draft version identifier if in Preview mode. It won’t return anything for Live or Latest versions. USE CASE(S) Use it to fire tags only if in a certain environment. Remember to read my Environment Guide while you’re at it! 14. Google Analytics Settings

Comments
  • Just on curious, what's this syntax called {% for lens in collections.lenses.products %} in Vue?
  • That's liquid. The property values returned are as normal. I am just looking to get the returned values instead of undefined. As i said, the browser gets the data-price, although, Vue doesn't.
  • What's e.target value at that point of time? You might get undefined because it's not available anymore.
  • At that point using console.log only value on selection returns a value, the lens.price is instantly undefined. Both before setting this.lensPrice or after.
  • There's not enough context to see the problem. lens is defined both in your liquid template and the Vue template, but it's unclear how lens is defined in your Vue script.
  • Thanks i'll do some more reading on the subject. I tried using the dataset attribute of data-price and still nothing.
  • It is standard behaviour for an HTML <select>, not specific to Vue. It is unclear why you would expect all of the attributes of the <option> to be magically copied across to the <select> when a value is chosen. From a Vue perspective the correct way to handle this would be to keep JS data as the source of truth rather than trying to store everything in the DOM. If you have the value as some sort of unique identifier then you can find the corresponding object within the original array. Or use v-model and Vue's special non-string value support to use objects as values.
  • Yes you are correct. It's not the correct way and i will try learn more to understand this.