Vue JS 无法将 innerHTML 的属性设置为 null

Question

I am trying to display my array as well as display it after applying array methods to it

<template>
<div>
  <div id="demo"></div>
  <div id="demo1"></div>
</div>
</template>
<script>
const formulaOneTeams = ["Red Bull", "Mercedes", "Ferrari", "Mclaren", "Aston Martin", "Alpine Racing", "Haas", "Williams", "Alpha Tauri", "Alfa Romeo"];

document.getElementById("demo").innerHTML = formulaOneTeams;
document.getElementById("demo1").innerHTML = formulaOneTeams.join(" * ");
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

As mentioned see the official Documentation on single file components .

<template>
  <div id="my-component">
    <div>{{formulaOneTeams}}</div>
    <div>{{formulaOneTeams.join(" * ")}}</div>
  </div>
</template>
<script>
export default {
    data: () => {
        return {
            formulaOneTeams: [
                "Red Bull",
                "Mercedes",
                "Ferrari",
                "Mclaren",
                "Aston Martin",
                "Alpine Racing",
                "Haas",
                "Williams",
                "Alpha Tauri",
                "Alfa Romeo",
            ]
        }
    },
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>