return a string from array

Question

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"

join() is a function which works only with array but you used it on string (because you have used toString() function before). — Jax-p
– Jax-p, Commented Oct 11, 2019 at 12:07
Since result is already a string, why don't you simply print it? join is an Array method. Otherwise, if this.selectedFixture is an array, just do this.selectedFixture.join(). In any case, using a method is not the cleverest approach in any MVC framework. — briosheje
– briosheje, Commented Oct 11, 2019 at 12:07
You shouldn't be manipulating the DOM inside the method. Use a computed property instead and just return the string. — skirtle
– skirtle, Commented Oct 11, 2019 at 12:09
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — skirtle
– skirtle, Commented Oct 11, 2019 at 12:11

tony19 · Accepted Answer · 2022-07-15 05:15:51Z

1

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

edited Jul 15, 2022 at 5:15

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 11, 2019 at 12:16

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gekkedev · Accepted Answer · 2019-10-11 12:22:46Z

0

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());

answered Oct 11, 2019 at 12:22

gekkedev

5934 silver badges20 bronze badges

Collectives™ on Stack Overflow

return a string from array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related