Почему не меняется background?

Question

Почему не меняется стиль body?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyVueRandomColor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body v-bind:style="{backgroundColor: color}" id="main">
  
  <div class="color">
    <span class="hex">{{ color }}</span>
    <button class="btn" @click="changeColor">Get New Color</button>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script src="app.js"></script>
</body>
</html>


const App = {
  data() {
    return {
      color: "#e74c3c"
    }
  },
  methods: {
    changeColor() {
      this.spanText = "#" + Math.floor(Math.random()*16777216).toString(16)
    }
  }
}

Vue.createApp(App).mount("#main")

Answer 1

Работает:

<div id="app">
  <main v-bind:style="{backgroundColor: color}" id="main">

    <div class="color">
      <span class="hex">{{ color }}</span>
      <button class="btn" @click="changeColor">Get New Color</button>
    </div>
  </main>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        color: "#e74c3c"
      }
    },
    methods: {
      changeColor() {
        this.color = "#" + Math.floor(Math.random() * 16777216).toString(16)
      }
    }
  })
</script>

P.S: что у Вас в this.spanText ?!

С vue3 (@next):

<div id="app">
  <main v-bind:style="{backgroundColor: color}" id="main">

    <div class="color">
      <span class="hex">{{ color }}</span>
      <button class="btn" @click="changeColor">Get New Color</button>
    </div>
  </main>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const {
    createApp
  } = Vue;

  const App = {
    el: '#app',
    data: function() {
      return {
        color: "#e74c3c"
      }
    },
    methods: {
      changeColor() {
        this.color = "#" + Math.floor(Math.random() * 16777216).toString(16)
      }
    }
  }

  createApp(App).mount("#app");
</script>

Answer 2

Ваш цвет записан в переменную color, а вы пытыетесь поменять несуществующую spanText. Замените this.spanText на this.color.

const App = {
  data() {
    return {
      color: "#e74c3c"
    }
  },
  methods: {
    changeColor() {
      this.color = "#" + Math.floor(Math.random()*16777216).toString(16)
    }
  }
}

Vue.createApp(App).mount("#main")

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyVueRandomColor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body v-bind:style="{backgroundColor: color}" id="main">
  
  <div class="color">
    <span class="hex">{{ color }}</span>
    <button class="btn" @click="changeColor">Get New Color</button>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script src="app.js"></script>
</body>
</html>

БЛОГ НА HUSL

Почему не меняется background?

Ответы (2 шт):