VueJS изменить шрифт определенной строки не все строки

Question

Текущий код изменяет шрифт для всех строк по сравнению с конкретной строкой:

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post row">
      <h3 class="cell"> {{ post.title }}</h3>
      <button @click="$emit('enlarge-text')">Enlarge text</button>
      <div v-html="post.content" class="cell"></div>
    </div>
  `,
});

new Vue({
  el   : '#blog-post-demo',
  data : {
    posts : [
      {id: 1, title : 'My Journey to Africa',    content : 'I am the post'},
      {id: 2, title : 'My Journey to America',   content : 'I am the post'},
      {id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
      {id: 4, title : 'My Journey to Asia',      content : 'I am the post'},
    ],
    postFontSize : 1,
  }
});

.row {
  background-color: cyan;
}

.cell {
  background-color: antiquewhite;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

<div id="blog-post-demo">
  <blog-post v-for="post in posts" :post="post" :key="post.id" :style="{fontSize : postFontSize + 'em'}" @enlarge-text="postFontSize += 0.1"></blog-post>
</div>

Как я могу просто манипулировать определенной строкой, одной строкой, обновляя размер шрифта одной строки по сравнению со всеми строками?

Пробовалследующее, но это не сработало:

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post row" :style="{fontSize : postFontSize + 'em'}" @enlarge-text="postFontSize += 0.1">
      <h3 class="cell">{{ post.title }}</h3>
      <button @click="$emit('enlarge-text')">Enlarge text</button>
      <div v-html="post.content" class="cell"></div>
    </div>
  `,
});

new Vue({
  el   : '#blog-post-demo',
  data : {
    posts : [
      {id: 1, title : 'My Journey to Africa',    content : 'I am the post'},
      {id: 2, title : 'My Journey to America',   content : 'I am the post'},
      {id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
      {id: 4, title : 'My Journey to Asia',      content : 'I am the post'},
    ],
    postFontSize : 1,
  }
})

.row {
  background-color: cyan;
}

.cell {
  background-color: antiquewhite;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

<div id="blog-post-demo">
  <blog-post v-for="post in posts" :post="post" :key="post.id"></blog-post>
</div>

Answer 1

Причина, по которой ваш первый фрагмент кода не работает, заключается в том, что вы поместили переменную postFontSize в ее родительский компонент.Вот почему все дочерние компоненты будут иметь одну и ту же переменную, то есть одно изменение в переменной повлияет на каждого дочернего элемента.

Чтобы устранить проблему, просто переместите все переменные, связанные с blog-post компонентом, в компонент blog-post (не вего родительский компонент).

Это включает postFontSize, @click метод и :style объявление:

Vue.component('blog-post', {
  template: `
    <div class="blog-post row" :style="{ fontSize: postFontSize + 'em' }">
      <h3 class="cell">{{ post.title }}</h3>
      <button @click="enlargeText">Enlarge text</button>
      <div v-html="post.content" class="cell"></div>
    </div>
  `,
  props: ['post'],
  data: function(){
    return {
      postFontSize: 1
    }
  },
  methods: {
    enlargeText: function(){
      this.postFontSize += 0.1;
    }
  }
});

new Vue({
  el   : '#blog-post-demo',
  data : {
    posts : [
      {id: 1, title : 'My Journey to Africa',    content : 'I am the post'},
      {id: 2, title : 'My Journey to America',   content : 'I am the post'},
      {id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
      {id: 4, title : 'My Journey to Asia',      content : 'I am the post'},
    ]
  }
});

.row {
  background-color: cyan;
}

.cell {
  background-color: antiquewhite;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

<div id="blog-post-demo">
  <blog-post v-for="post in posts" :post="post" :key="post.id"></blog-post>
</div>

Answer 2

Если вы хотите обновить только 1 строку, postFontSize должны быть локальными данными blog-post компонента

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <style>
    .row {
      background-color: cyan;
    }

    .cell {
      background-color: antiquewhite;
    }
  </style>
</head>
<body>
    <div id="blog-post-demo">
      <blog-post v-for="post in posts" :post="post" :key="post.id"></blog-post>
    </div>
  <script>
    
Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post row" :style="{fontSize : postFontSize + 'em'}">
      <h3 class="cell"> {{ post.title }}</h3>
      <button @click="postFontSize += 0.1">Enlarge text</button>
      <div v-html="post.content" class="cell"></div>
    </div>`,
  data() {
     return {
          postFontSize : 1
     }
  }
})
new Vue({
  el   : '#blog-post-demo',
  data : {
    posts : [
      {id: 1, title : 'My Journey to Africa',    content : 'I am the post'},
      {id: 2, title : 'My Journey to America',   content : 'I am the post'},
      {id: 3, title : 'My Journey to Antartica', content : 'I am the post'},
      {id: 4, title : 'My Journey to Asia',      content : 'I am the post'},
    ]
  }
})
  </script>
</body>
</html>