<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="FeedCreator 1.8" -->
<?xml-stylesheet href="https://wws.jp/lib/exe/css.php?s=feed" type="text/css"?>
<rdf:RDF
    xmlns="http://purl.org/rss/1.0/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
    xmlns:dc="http://purl.org/dc/elements/1.1/">
    <channel rdf:about="https://wws.jp/feed.php">
        <title>Wiki and Web Service vuejs:vue3</title>
        <description></description>
        <link>https://wws.jp/</link>
        <image rdf:resource="https://wws.jp/_media/favicon.ico" />
       <dc:date>2026-05-14T08:21:51+00:00</dc:date>
        <items>
            <rdf:Seq>
                <rdf:li rdf:resource="https://wws.jp/vuejs/vue3/paginator?rev=1668505821&amp;do=diff"/>
                <rdf:li rdf:resource="https://wws.jp/vuejs/vue3/select_form?rev=1661242547&amp;do=diff"/>
                <rdf:li rdf:resource="https://wws.jp/vuejs/vue3/combo_form?rev=1648340189&amp;do=diff"/>
                <rdf:li rdf:resource="https://wws.jp/vuejs/vue3/labeled_combo_form?rev=1648338351&amp;do=diff"/>
            </rdf:Seq>
        </items>
    </channel>
    <image rdf:about="https://wws.jp/_media/favicon.ico">
        <title>Wiki and Web Service</title>
        <link>https://wws.jp/</link>
        <url>https://wws.jp/_media/favicon.ico</url>
    </image>
    <item rdf:about="https://wws.jp/vuejs/vue3/paginator?rev=1668505821&amp;do=diff">
        <dc:format>text/html</dc:format>
        <dc:date>2022-11-15T09:50:21+00:00</dc:date>
        <dc:creator>admin (admin@undisclosed.example.com)</dc:creator>
        <title>Paginator - [Demo] </title>
        <link>https://wws.jp/vuejs/vue3/paginator?rev=1668505821&amp;do=diff</link>
        <description>Paginator

この実装を Vue3 用に移植してみました。

&lt;https://github.com/lokyoung/vuejs-paginate/blob/master/src/components/Paginate.vue&gt;

実際にリストに実装しての確認は、まだしていません。。。

Code


import { onBeforeUpdate, ref, computed } from &#039;https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js&#039;;

const Paginator = {
  template: `
  &lt;component is=&quot;style&quot;&gt;
    ul.paginator a { cursor: pointer; }
  &lt;/component&gt;
  &lt;ul class=&quot;paginator&quot; :class=&quot;containerClass&quot; v-if=&quot;!noLiSurround&quot;&gt;
    &lt;li v-if=&quot;firstLastButton&quot; :class=&quot;[p…</description>
    </item>
    <item rdf:about="https://wws.jp/vuejs/vue3/select_form?rev=1661242547&amp;do=diff">
        <dc:format>text/html</dc:format>
        <dc:date>2022-08-23T08:15:47+00:00</dc:date>
        <dc:creator>admin (admin@undisclosed.example.com)</dc:creator>
        <title>Vue.js 3.x SelectForm コンポーネント - [コード] </title>
        <link>https://wws.jp/vuejs/vue3/select_form?rev=1661242547&amp;do=diff</link>
        <description>Vue.js 3.x SelectForm コンポーネント

要求

select タグのエラーメッセージ表示付きコンポーネント 

コード


import { computed } from &#039;https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js&#039;;
import { getWrapClass, generalizeOptions } from &#039;https://wws.jp/_export/code/vuejs/vue3/form_utils?codeblock=0&#039;;

const SelectForm = {
  template: `
    &lt;div :class=&quot;computedControlWrapperClasses&quot; :style=&quot;controlWrapperStyles&quot;&gt;
      &lt;select class=&quot;form-control&quot;
        :class=&quot;controlClasses&quot;
        :style=&quot;controlStyles&quot;
     …</description>
    </item>
    <item rdf:about="https://wws.jp/vuejs/vue3/combo_form?rev=1648340189&amp;do=diff">
        <dc:format>text/html</dc:format>
        <dc:date>2022-03-27T00:16:29+00:00</dc:date>
        <dc:creator>admin (admin@undisclosed.example.com)</dc:creator>
        <title>Vue.js 3.x ComboForm コンポーネント - [コード] </title>
        <link>https://wws.jp/vuejs/vue3/combo_form?rev=1648340189&amp;do=diff</link>
        <description>Vue.js 3.x ComboForm コンポーネント

要求

	*  以下のタイプを実装するボタンとエラーメッセージ表示付き input コンポーネント （但し、ボタン部分はエラー色にならない）
		*  text
		*  password</description>
    </item>
    <item rdf:about="https://wws.jp/vuejs/vue3/labeled_combo_form?rev=1648338351&amp;do=diff">
        <dc:format>text/html</dc:format>
        <dc:date>2022-03-26T23:45:51+00:00</dc:date>
        <dc:creator>admin (admin@undisclosed.example.com)</dc:creator>
        <title>Vue.js 3.x LabeledComboForm コンポーネント - [コード] </title>
        <link>https://wws.jp/vuejs/vue3/labeled_combo_form?rev=1648338351&amp;do=diff</link>
        <description>Vue.js 3.x LabeledComboForm コンポーネント

要求

	*  input の以下のタイプを実装するラベル付きコンポーネント 
		*  text
		*  password
		*  email
		*  url
		*  number
		*  date
		*  time

	*  v-model 対応
	*  再利用可能なコンポーネントとする。</description>
    </item>
</rdf:RDF>
