CODEWITHSUNDEEP
javascriptvue.js
TheDevGuy
TheDevGuy

Reputation: 703

return a string from array

I just want to return a string from an array in vue. I made method like this:

displayFixturesName() {
                const result = this.selectedFixture.toString();
                document.getElementById('resultFixture').innerHTML = result.join()

            }

this.selectedFixture is an array of my selection

and I display it like this 

<p class="subtitle" id="resultFixture">{{displayFixturesName()}}</p>

Finally, I have a message in my console and it doesn't work-

[Vue warn]: Error in render: "TypeError: result.join is not a function"

Upvotes: 0

Views: 644

Answers (2)

skirtle
skirtle

Reputation: 29122

The correct way to do this in Vue is to use a computed property to return the string:

computed: {
  displayFixturesName() {
    return this.selectedFixture.join(', ');
  }
}

Then in the template you'd have:

<p class="subtitle">{{ displayFixturesName }}</p>

I've removed the id (you shouldn't need it, Vue has ref if you need to grab an element) and also the () from after displayFixturesName.

Generally you should avoid manipulating the DOM yourself, just leave Vue to do it. There are a few exceptions, such as working with third-party libraries or measuring sizes, but they are rare.

The documentation on computed properties is here:

https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties

Upvotes: 1

gekkedev
gekkedev

Reputation: 593

Your issue is not related to VUE, but to the usage of .join().
As Jax-p pointed out in a comment already, this method does not exist on strings, only on arrays. Your .join() call will implicitly out

I've reduced your example to plain JavaScript to demonstrate how you could use the method.

const fixture = ["selected", "Fixture"];
console.log(fixture.join());

Upvotes: 0

Related Questions