主页 / user-308204

Mathieu Dhondt's questions

Martin Hope
Mathieu Dhondt
Asked: 2023-10-29 15:43:19 +0800 CST
  • 6

我正在使用 Django 的重新分组模板标签来对一系列对象进行分组。假设这些是对象：

cities = [
    {"name": "Mumbai", "population": "19,000,000", "country": "India"},
    {"name": "Calcutta", "population": "15,000,000", "country": "India"},
    {"name": "New York", "population": "20,000,000", "country": "USA"},
    {"name": "Chicago", "population": "7,000,000", "country": "USA"},
    {"name": "Tokyo", "population": "33,000,000", "country": "Japan"},
]

在我的模板中，我将它们分组如下：

{% regroup cities by country as country_list %}

<ul>
{% for country in country_list %}
    <li>{{ country.grouper }}
    <ul>
        {% for city in country.list %}
          <li>{{ city.name }}: {{ city.population }}</li>
        {% endfor %}
    </ul>
    </li>
{% endfor %}
</ul>

这导致

India
    Mumbai: 19,000,000
    Calcutta: 15,000,000
USA
    New York: 20,000,000
    Chicago: 7,000,000
Japan
    Tokyo: 33,000,000

我想显示每个对象的“总体”索引，使其看起来像这样：

India
    1: Mumbai: 19,000,000
    2: Calcutta: 15,000,000
USA
    3: New York: 20,000,000
    4: Chicago: 7,000,000
Japan
    5: Tokyo: 33,000,000

我不是在要求一个 HTML 解决方案；我是在要求一个 HTML 解决方案。我的用例是一系列分组问题，我想添加一个问题计数器。

有没有办法在模板中执行此操作，或者我应该在我的视图中编写必要的代码？

django
Martin Hope
Mathieu Dhondt
Asked: 2023-09-24 18:40:07 +0800 CST
  • 6

我有一个Search将 prop 传递query给子组件的父组件Results。

搜索.vue

<template>
  <div>
    <input v-model="query" type="text" />
    <Results :query="query" />
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Results from "./Results.vue";
export default defineComponent({
  name: "Search",
  components: { Results },
  data() {
    return {
      query: "",
    };
  },
});
</script>

结果.vue

<template>
  <div>{{ query }} ( {{ query.length }})</div>
</template>

<script setup>
import { defineProps, watch, computed } from "vue";
const { query } = defineProps({
  query: {
    type: String,
    default: "",
  },
});

const queryLength = computed(() => query.length);

watch(
  () => query,
  () => {
    console.debug("Watcher was fired.");
  }, {immediate: true}
);

watch(queryLength, () => {
  console.debug("Watcher was fired.");
});

</script>

道具的观察者query永远不会触发，除非我添加{immediate: true}到观察者，但更新时它不会触发。当我添加基于 prop 的计算属性时，它也不会执行任何操作query。

奇怪的是，当显示queryprop 时，会渲染该值。

这是我的代码的最简单版本。我究竟做错了什么？

vuejs3