Question

我正在vuejs中处理子字符串和观察者。我有一个问题。在我的数据模型中，最终将有大约20个状态，每个状态都添加了代码。我只将代码过滤为前几个字母-这样一来，我也应该能够编写一些条件渲染，以显示表示该代码的状态名称。例如，如果我有NY9830或NY83793，则该子字符串会将其缩减为仅NY，而我正在尝试使文本更新为New York。它没有更新，我在v模型中添加了一块手表。我将针对不同的州设置20种条件，因此，最简单的方法会有所帮助。

new Vue({
  el: "#liveapp",

  data: function() {
    return {
      Office: 'NY006 '
    }
  },
  methods: {

  },
  watch: {
    stateValue: function() {
      if (this.office == "NY") {
        alert("display New York");
        this.stateValue = "New York";
      } else if (this.office == "LA") {
        alert("display Louisiana");
        this.stateValue = "Louisiana";
      }
    }
  },

  filters: {

    liveSubstr: function(string) {
      return string.substring(0, 2);
    }

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="liveapp">
  <h2>Todos:</h2>

  <p v-model="stateValue">{{ Office | liveSubstr}}</p>
</div>

Answer 1

如果我正确地阅读了您的问题，我认为您想要的是一个过滤器，该过滤器可以将 office 代码（例如“ NY9830” ）转换为完整的州名称，例如“纽约” 。

您可以使用状态缩写到全名的映射来支持过滤器。例如

const states = new Map([
  ['NY', 'New York'],
  ['LA', 'Louisiana'],
  ['TX', 'Texas']
])

Vue.filter('state', value => {
  return states.get(value.substring(0, 2)) || 'Unknown'
})

new Vue({
  el: '#app',
  data: () => ({ offices: [] }),
  created() {
    // simulate remote request
    setTimeout(() => {
      this.offices = ['NY9830', 'NY83793', 'LA7474', 'TX0894']
    }, 1000)
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <ul>
    <li v-for="office in offices" :key="office">
      {{ office }} - {{ office | state }}
    </li>
  </ul>
</div>

使用子字符串过滤并等待更改，但没有更新

1 个答案: