Início / user-308204

Mathieu Dhondt's questions

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

Estou usando a tag de modelo regroup do Django para agrupar uma série de objetos. Digamos que estes sejam os objetos:

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"},
]

No meu modelo, estou agrupando-os assim:

{% 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>

O que resulta em

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

Gostaria de mostrar um índice "geral" para cada objeto, para que fique assim:

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

Não estou pedindo uma solução HTML; meu caso de uso é uma série de perguntas agrupadas e gostaria de adicionar um contador de perguntas.

Existe uma maneira de fazer isso no modelo ou devo escrever o código necessário na minha visão?

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

Eu tenho um componente pai Searchque passa a propriedade querypara um componente filho Results.

Pesquisa.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>

Resultados.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>

O observador do querysuporte nunca é acionado, exceto quando eu adiciono {immediate: true}ao observador, mas ele não é acionado nas atualizações. Também não faz nada quando adiciono uma propriedade computada com base na querypropriedade.

O estranho é que ao exibir a queryprop, o valor é renderizado.

Aqui está a versão mais simples do meu código . O que estou fazendo de errado?

vuejs3